Opacity is not applied to composited child of a border radius parent
Reported by
kra...@gmail.com,
Apr 6 2017
|
|||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Example URL: https://app.bugsee.com/#/apps Steps to reproduce the problem: 1. Signup and create new apps 2. Mouse over any application card 3. Animation is not smooth. It blinks. What is the expected behavior? Animation on each application card should be smooth. It seems that there is some z-index issue as playing with it partially solves the problem, but makes ordering incorrect What went wrong? When hovering application cards animation are not smooth. They are blinking. Everyhting was fine in Chrome 56, and all other browsers (Safari, Firefox, Edge). Now, starting from M57, Chrome seems to have some regresion that makes that animations blink. Does it occur on multiple sites: No Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 57.0.2987.133 Channel: stable OS Version: 10.0 Flash Version: Here is the the GIF, that shows the issue: https://gyazo.com/74bd01e57559be6b1ee65d3868f33f2f In front, is Chrome 57, and behind is Firefox 52.
,
Apr 6 2017
A friendly reminder that M58 Stable is launch is coming soon (less than 2 weeks)! Your bug is labelled as Stable ReleaseBlock, pls make sure to land the fix and get it merged into the release branch ASAP so it gets enough baking time in Beta (before Stable promotion). Thank you!
,
Apr 7 2017
Able to reproduce the issue on Windows 10, Ubuntu 14.04 and Mac 10.12.3 using chrome reported version #57.0.2987.133 and latest canary #59.0.3065.0. Bisect Information: ===================== good build: 57.0.2972.0 Revision(441559) bad build: 57.0.2973.0 Revision(441616) Change Log URL: https://chromium.googlesource.com/chromium/src/+log/cd8243b3c7f369202cffc7afcc2e75338de3da92..d3ba7664a7ebc6e74861602eb9696c7ca0a4ed2e From the above change log suspecting below change Review URL: https://codereview.chromium.org/2588853002 schenney@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner. Thanks...!!
,
Apr 7 2017
Opacity does not work with the composited child of a border-radius element, apparently. We have seem other issues with this since we fixed the border-radius for composited children bug.
I have verified that you can work around this by adding "will-change: transform" to the element with the border radius, or by removing the border radius (in which case you will probably match Chrome 56 behavior).
<a _ngcontent-c18="" class="title-area palette-color-13" href="#/apps/IOS" style="
will-change: transform;
">
I'm working on fixing these issues and we are not going to revert the border-radius fix. It can stay release blocking for now.
,
Apr 7 2017
Yes, thank you. "will-change" indeed fixes the issue.
,
Apr 7 2017
Reduced test case attached. When composited, we show the inner element as fully opaque, regardless of the opacity. In the original bug the transition causes the inner element to be composited during the animation so it pops as soon as the animation starts or ends. If you change the background color of the inner element to be fully opaque, then it works again, possibly because it changes the result of an opaque background check. That suggests a fix, maybe. I'm willing to bet this is a duplicate of 702042, but we'll only know when it's fixed.
,
Apr 11 2017
schenney@ Gentle remainder to get an update on this stable blocker issue. Thanks,
,
Apr 17 2017
Still able to reproduce the issue on Mac 10.12.4 using latest canary #60.0.3072.0 and Ubuntu 14.04 using latest dev #59.0.3067.6. schenney@ - Gentle Ping...!! Could you please have a look into this issue as it has been marked as stable blocker. Thanks...!!
,
Apr 17 2017
Just a heads up since this is marked as RB-Stable - we are aiming to launch M58 early stable this Wednesday, RC cut today @ 5:00 PM PT or latest by tomorrow noon if all goes well.
,
Apr 17 2017
,
Apr 17 2017
Issue 702042 has been merged into this issue.
,
Apr 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/ada0f67fca5c772aac731925e3ce4918548a04a5 commit ada0f67fca5c772aac731925e3ce4918548a04a5 Author: chrishtr <chrishtr@chromium.org> Date: Tue Apr 18 00:34:58 2017 Disable the direct-drawing optimization for quads with opacity. R=enne@chromium.org BUG= 709081 CQ_INCLUDE_TRYBOTS=master.tryserver.blink:linux_trusty_blink_rel Review-Url: https://codereview.chromium.org/2821133002 Cr-Commit-Position: refs/heads/master@{#465078} [modify] https://crrev.com/ada0f67fca5c772aac731925e3ce4918548a04a5/cc/output/gl_renderer.cc [add] https://crrev.com/ada0f67fca5c772aac731925e3ce4918548a04a5/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.png [add] https://crrev.com/ada0f67fca5c772aac731925e3ce4918548a04a5/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.txt [add] https://crrev.com/ada0f67fca5c772aac731925e3ce4918548a04a5/third_party/WebKit/LayoutTests/compositing/opacity-with-mask.html
,
Apr 18 2017
,
Apr 18 2017
Your change meets the bar and is auto-approved for M59. Please go ahead and merge the CL to branch 3071 manually. Please contact milestone owner if you have questions. Owners: amineer@(Android), cmasso@(iOS), gkihumba@(ChromeOS), Abdul Syed@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 18 2017
This bug requires manual review: Only 6 days from stable, we might already have a stable candidate build Please contact the milestone owner if you have questions. Owners: amineer@(Android), cmasso@(iOS), bhthompson@(ChromeOS), govind@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/8840dfaa0b63215b004c41fa9790b449eb2f1fb0 commit 8840dfaa0b63215b004c41fa9790b449eb2f1fb0 Author: Chris Harrelson <chrishtr@chromium.org> Date: Tue Apr 18 01:09:55 2017 Disable the direct-drawing optimization for quads with opacity. R=enne@chromium.org BUG= 709081 CQ_INCLUDE_TRYBOTS=master.tryserver.blink:linux_trusty_blink_rel Review-Url: https://codereview.chromium.org/2821133002 Cr-Commit-Position: refs/heads/master@{#465078} (cherry picked from commit ada0f67fca5c772aac731925e3ce4918548a04a5) Review-Url: https://codereview.chromium.org/2821903004 . Cr-Commit-Position: refs/branch-heads/3071@{#30} Cr-Branched-From: a106f0abbf69dad349d4aaf4bcc4f5d376dd2377-refs/heads/master@{#464641} [modify] https://crrev.com/8840dfaa0b63215b004c41fa9790b449eb2f1fb0/cc/output/gl_renderer.cc [add] https://crrev.com/8840dfaa0b63215b004c41fa9790b449eb2f1fb0/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.png [add] https://crrev.com/8840dfaa0b63215b004c41fa9790b449eb2f1fb0/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.txt [add] https://crrev.com/8840dfaa0b63215b004c41fa9790b449eb2f1fb0/third_party/WebKit/LayoutTests/compositing/opacity-with-mask.html
,
Apr 18 2017
Tested the issue on Win-10, Mac 10.12.4 and Ubuntu 14.04 using chrome version #60.0.3074.0. Following are the steps followed to reproduce the issue. ------------ 1. Navigated to URL: https://app.bugsee.com/#/apps 2. Signed up and created new apps. 3. Mouse hovered an application card. 4. Observed that animation is bit smooth(not as worse as in the chrome reported version #57.0.2987.133), but while hovering on the card the "View OS" label blinked and it didn't behave as in the attached chrome_good_build.mp4. chrishtr@ - Could you please verify the screen cast and please confirm on the fix and expected behavior. Thanks...!!
,
Apr 18 2017
,
Apr 18 2017
Context for the approval in c#19 - we've verified the behavior in c#18 is not related to the changes being merged, which is why we are proceeding with the merge.
,
Apr 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5841030bd568de16e9536960241b0a97876d95df commit 5841030bd568de16e9536960241b0a97876d95df Author: Chris Harrelson <chrishtr@chromium.org> Date: Tue Apr 18 18:59:17 2017 Disable the direct-drawing optimization for quads with opacity. R=enne@chromium.org BUG= 709081 CQ_INCLUDE_TRYBOTS=master.tryserver.blink:linux_trusty_blink_rel Review-Url: https://codereview.chromium.org/2821133002 Cr-Commit-Position: refs/heads/master@{#465078} (cherry picked from commit ada0f67fca5c772aac731925e3ce4918548a04a5) Review-Url: https://codereview.chromium.org/2825843002 . Cr-Commit-Position: refs/branch-heads/3029@{#743} Cr-Branched-From: 939b32ee5ba05c396eef3fd992822fcca9a2e262-refs/heads/master@{#454471} [modify] https://crrev.com/5841030bd568de16e9536960241b0a97876d95df/cc/output/gl_renderer.cc [add] https://crrev.com/5841030bd568de16e9536960241b0a97876d95df/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.png [add] https://crrev.com/5841030bd568de16e9536960241b0a97876d95df/third_party/WebKit/LayoutTests/compositing/opacity-with-mask-expected.txt [add] https://crrev.com/5841030bd568de16e9536960241b0a97876d95df/third_party/WebKit/LayoutTests/compositing/opacity-with-mask.html
,
Apr 18 2017
Comment 18 is broken out into a new bug: https://bugs.chromium.org/p/chromium/issues/detail?id=712783
,
Apr 19 2017
Verified the issue on windows 7, Mac 10.12.4 and Ubuntu 14.04 using chrome version #58.0.3029.81 as per comment #0. Observed that animation on the application card is smooth as expected. Hence adding TE verified labels. Attaching screencast for reference. Thanks...!!
,
Apr 20 2017
Rechecked the issue on windows 10, Mac 10.12.4 and Ubuntu 14.04 using chrome version #59.0.3071.15 as per comment #0. Observed that animation displayed on mouse hover is smooth as expected. Adding TE verified labels. Thanks.! |
|||||||||||||||
►
Sign in to add a comment |
|||||||||||||||
Comment 1 by ligim...@chromium.org
, Apr 6 2017