Bug 57126 – Animated elements flash (disappear then reappear) when css: position, negative text indent and transforms are combined

• Component: CSS
• Status: RESOLVED MOVED

[Bob Spryn]

I actually noticed this in two places.

First I had an absolutely positioned unordered list I was trying to animate with transitions and transforms. The whole list would disappear then reappear at its final spot. Finally I realized it went away if I'd delete an element that had a huge negative text indent on it (-9999em) which was inside each of the li's.

When I changed it down to a reasonable amount, it seemed to fix the animation problem.

screencast of the problem: http://screencast.com/t/1ntW5gDb

Then I noticed that animations were actually affecting elements on an unrelated part of the DOM.

Attempt to capture it in this video: http://screencast.com/t/hlG38Btzepdo (after switching the nav bar below to relative positioning, you see it flash the first time. It actually flashes everytime after that change, but the screencast only captured one of them.)

When animating an unrelated DOM element with transitions and transforms, a nav bar on a module below began to flash. It ended up being the same reason (the buttons are image replaced text that were indented negatively.) This one I could only fix by removing the position: relative from the parent nav bar.

I know this is a bit weird, I can explain it better if need be.

[Simon Fraser (smfr)]

This is a known issue relating to large layers.