Opacity animation isn't applied to split text
Reported by
hike...@mozilla.com,
May 23 2018
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0 Example URL: https://hg.mozilla.org/mozilla-central/file/9055d9d89a4b/layout/reftests/css-animations/ib-split-sibling-opacity.html Steps to reproduce the problem: Opacity animation on 'C' text should be also applied. What is the expected behavior? What went wrong? 'C' is not animated at all. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 66.0.3359.139 Channel: n/a OS Version: Flash Version:
,
May 23 2018
,
May 24 2018
hikezoe@ Thanks for the issue. Tested this issue on Ubuntu 14.04, Windows 10 and Mac OS 10.13.3 on the reported version 66.0.3359.139 and the latest Canary 68.0.3439.0 by following the below steps. 1. Launched Chrome and navigated to the above given URL. 2. Pasted the code in a html file and opened the html file on Chrome. 3. Cannot observe any animation on 'C'. The same behavior is observed on Firefox and Edge. Attached is the screen shot for reference. Request you to check and confirm if anything is missed from our end in triaging the issue. Thanks..
,
Sep 5
Confirmed. Minimised repro is http://output.jsbin.com/badozob . Behaviors across browsers: Chrome: 'C' does not animate, and is visible throughout. Firefox 52.8.1: both animate, after 3s both letters will reappear Edge Insider Preview: both animate, after 3s both letters will reappear Safari 11.1: both animate, after 3s both letters will reappear I'm not yet sure if 'step-end' and 'reverse' are both needed or not.
,
Sep 11
,
Sep 11
Tweaked the failing example to get a better understanding of what is going wrong.
<!DOCTYPE html>
<html class="reftest-wait reftest-no-flush">
<title>Opacity animation on ib-split-sibling</title>
<style>
@keyframes anim {
from { opacity: 0;}
to { opacity: 1;}
}
@keyframes anim2 {
from { background: pink; }
to { background: yellow; }
}
</style>
<body id="colorized">
<span id="animating">A <span style="display:block">B</span> C</span>
<body>
<script>
window.addEventListener("load", () => {
animating.style.animation = 'anim 3s steps(100, end) reverse';
colorized.style.animation = 'anim2 6s ease';
});
</script>
Animating the background of the body suggests that it is not a problem with the repaint rect.
The animation behavior changes depending on whether the --enable-blink-gen-property-trees flag is set. "A" and "C" each get an associated layer, but in the default case, the layer for "C" is not associated with the animation. In either case, "B" does not have an associated layer.
Adding "left: 0" to the keyframe properties "fixes" the problem by pushing the animation to the main thread, suggesting a compositor issue.
,
Sep 11
The assigned owner "kevers@chromium.org" is not able to receive e-mails, please re-triage. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 12
,
Sep 12
Cleared my "bounce" status.
,
Sep 12
The animation works as expected if animating foreground color instead of opacity.
,
Sep 13
I think this bug likely has to do with how animations apply to continuations. See this comment for more information about how continuations work: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/layout/layout_inline.h?type=cs&q=layout_inline.h&sq=package:chromium&g=0&l=39 At the end of LocalFrameView::UpdateLayout you can add the following which will print out the layout tree and will show the continuations: GetLayoutView()->ShowLayoutTreeForThis(); In comment #6 you mention that the behavior is different with --enable-blink-gen-property-trees. It looks like this bug may be fixed with --enable-blink-gen-property-trees? It may be pragmatic to ignore the BlinkGenPropertyTrees interaction for now and try to solve the problem without BlinkGenPropertyTrees. In doing this, we will get to the root-cause and then we can discuss what to do with BlinkGenPropertyTrees.
,
Sep 14
Filed issue 884236 for the painting of the display:block span which does not respect the opacity of the enclosing span. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by hike...@mozilla.com
, May 23 2018