Bug 55600 – CSS transition problem with padding and margin.

• Component: CSS
• Status: NEW

[Myke Atkinson]

Created attachment 84444 [details]
A simple HTML document which shows the problem.

I was playing around with some CSS3 transition effects and stumbled upon this weird visual 'click' when the padding or margin of an item is transferred from left to right. The same result happens when using either padding or margin, as well as when you specify in pixels or ems. I have attached the HTML document which showed me the hiccup.

If you have any questions, feel free to email me: [e-mail].

Thanks for all your hard work!

-Myke

[Simon Fraser (smfr)]

I think because of rounding the two animating padding values don't always add up to the same number.

[Myke Atkinson]

Created attachment 91949 [details]
A modification of the first test to show more problems with the bug.

As submitted to me by Paul Court ([e-mail]):

If you set the transition time to something longer, say 10s, and then constantly move your mouse in and out of the element in question, you can actually get the margin/padding to completely collapse to 0.

Also, if you hold your mouse over for the full ten seconds the visible click keeps happening over and over.

[Simon Fraser (smfr)]

I think you're seeing rounding errors; we aren't smart enough to ensure that transitions on two side of an element, or two adjacent elements don't result in rounding differences.

[Brent Fulgham]

Chrome and Firefox handle this properly, but Safari adds a fun little wiggle to the first letter of the word.

[Radar WebKit Bug Importer]

<rdar://problem/96910392>