1330834 - Animating the transform on parent and child where one cannot run on the compositor produces flicker

Status: RESOLVED DUPLICATE of bug 1339578

(Core :: DOM: Animation, defect, P3)

Description

[Brian Birtles (:birtles, Feb 26~ parental leave)]

See http://codepen.io/danwilson/pen/bgpvyW

There is flicker as the circles move across. The arrangement is that the test animates transform on x and y axes separately by animating parent and child elements separately:

  <div id="distribute"> <!-- animates x here
    <div id="distribute-inner"></div> <!-- animates y here
  </div>

Now, for the inner element, because the frame is 10x10 (i.e. less than 16x16) we don't layerize and run it on the main thread. But for the outer element, we don't check that (?) and run it on the compositor. Because we're effectively animating the transform of the same element in different places we get flicker.

I think we could either:

(a) try to apply some sort of logic where if one transform animation is not able to run on the compositor, don't run transform for any direct ancestors / descendants on the compositor
(b) just fix this case more locally by making sure the frame size check acts the same for both an element and its parent in this case

There may be other options too.

Comment 1

[Hiroyuki Ikezoe (:hiro)]

I just checked the visbileDevPixel size of the outer element (id='distribute') in IsItemTooSmallForActiveLayer [1].

[1] https://hg.mozilla.org/mozilla-central/file/8eaf154b385b/layout/painting/nsDisplayList.cpp#l4768

The height of the size varies (from 8 to 108?), I guess it depends on translateY?

I think Matt Woodrow knows something.

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

This appears to be fixed in the latest nightly, presumably by bug 1339578.