1608194 - animations on position:fixed elements are throttled stylings in iframes

Status: RESOLVED FIXED

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

Description

[Ryan Littlefield]

Attachment: Screenshot_2020-01-09 Fading background numbers using css variables.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

1. Make an html page with a css keyframes animation.
2. Make an outer html page that has an iframe with a src attribute that points to the page in step 1.
3. Set the size of the iframe on the outer page to less than 50% of the outer page size (30% would be a good target).

You can see an example of this at this codepen:
https://codepen.io/lmmm/pen/GVZxYj

To reproduce, make sure you have a screen large enough for the bottom result section of the screen to be over 50% of the whole page. Then, resize the screen so that the result section is only taking up 30%. You will see that the animation stops.

This codepen is not the only example of this. This jsfiddle ( https://jsfiddle.net/32Lbvakx/ ) only has the result section take up 1/4 of the screen, and the animation is stopped. But if you copy the src attribute from the iframe and navigate to it in a new tab, the animation works.

Actual results:

The animation within the iframe stops as soon as the iframe is less than 50% of the size of the outer page. This can be observed easily when the iframe has a variable size and shares the page with other fixed-size content.

Expected results:

The CSS animations should continue even when they are in a small iframe.

Comment 1

[Alice0775 White]

I can reproduce the issue on Nightly74.0a1 Windows10. The problem is reproducible since Firefox63.

Regression window:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=1c235a552c32ba6c97e6030c497c49f72c7d48a8&tochange=9da8a5d80b984d473d8eeb30d3f3acf36ffe546f

Regressed by:
c1bab94cd24f3d600d4644497dd600e2e3e7f74a Hiroyuki Ikezoe — Bug 1471174 - Drop opacity value that was for preventing the animations run on the compositor and check the animation is NOT running on the compositor. r=birtles
41dabd41e63ecccfd827fde7b7bf5ff10d06c40d Hiroyuki Ikezoe — Bug 1471174 - Don't try to send invisible animations that we already throttled on the main thread. r=birtles
b6b24ba30090b3516ef9f6b0c6e036cbda60f89d Hiroyuki Ikezoe — Bug 1471174 - Constify nsIFrame::IsScrolledOutOfView. r=birtles

Hiroyuki Ikezoe,
Your bunch of patch seems to cause the regression.
Can you please look into this?

Comment 2

[Alice0775 White]

WORKAROUND
Setting dom.animations.offscreen-throttling to false in about:config fixes the issue.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

The test case in question works in fission window thanks to bug 1541705. Presumably I made some mistakes in IsFrameScrolledOutOfView.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

A problem I found in IsFrameScrolledOutOfView is that, for fixed:position frames in iframes we get HTMLScroll frame as an ancestor scrollable frame via nsLayoutUtils::GetNearestScrollableFrame(), but we walk up the frame tree beyond the iframe frame via nsLayoutUtils::TransformFrameRectToAncestor because the HTMLScroll frame is not an ancestor of the target frame itself. We need to somehow stop walking up the frame tree further.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Timothy wrote a patch in bug 1633276 which also fixes this issue too. Awesome! I am going to use this bug for an automated test for the case.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1608194 - Add a test case for a visible animation on a position:fixed element in an iframe. r?boris

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c8f546346cba
Add a test case for a visible animation on a position:fixed element in an iframe. r=boris

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/c8f546346cba