Try out the following HTML. You will notice that the edges of the 'dock' don't stay in fixed positions, but jostle around by one pixel during the animation, as the mouse passes from one icon to the next. You can use whatever square image you like for "icon.png". <!DOCTYPE html> <style type="text/css"> #dock { width: 100%; text-align: center; position: fixed; bottom: 0px; } img { width: 64px; -webkit-transition: width 0.15s linear; } img:hover { width: 128px; } </style> <div id="dock"><img src="icon.png"><img src="icon.png"><img src="icon.png"><img src="icon.png"><img src="icon.png"><img src="icon.png"></div>
Created attachment 26397 [details] Testcase
Because of rounding and synchronization issues, I don't think we can guarantee that the total width of two transitioning elements can add up to some constant value.
Safari, Chrome, and Firefox show the same rendering behavior for this test case. I do not believe any further compatibility issue remains.