Created attachment 180908 [details] A video showing two issues - left-over lines and flickering of the non-transitioned element Look at provided jsFiddle and hover the left element a few times. You'll see left-over lines being left as the element transitions its top position. I couldn't really reduce it much further - a lot of things are important - the ".bookmark" element having opacity transitioned, width, height & left being non-integer, hidden overflow etc. I don't know why but this jsFiddle doesn't show the second issue I have if I open the local site with provided code - the right element flickers when you hover the left one (see attached video). I can reproduce it in both Webkit Nightly and Chrome Canary. Chrome stable & Safari 6.0.2 doesn't exhibit the issue, the code works correctly in Firefox & Opera, too.
Created attachment 180909 [details] A video showing the issue on the original site (note flickering and the star moving from left to right) The flickering issue (but not the left-over lines) are much more visible on the site I first encountered the problem; I've just reduced the code significantly to help in debugging. I'm attaching screencast of part of the original site during CSS transitions. You might see that not only elements flicker but the star icon moves slightly to the right when transitioned from opacity 0 to 1 and it should stay put.
The bug has spread to Chrome stable now. :( Can anyone at least confirm it? I provided the test case and a quite detailed description and still no one responds.
Looks like a subpixel issue, esp. since you have elements with fractional sizes.
Seems like it. You agree it's a WebKit bug, though?
Certainly.
Can't reproduce it anymore, has sth related to this bug changed?
Still reproduces for me.
<rdar://problem/13233135>
I can't reproduce this in recent builds on 1x or 2x displays.
Not sure what build I was looking at, but it's working ok now.