CSS Bug: div fails to render with weird interaction with border-radius, overflow:hidden, z-index, and backface-visibility
Reported by
steven.m...@dominos.com,
Apr 7 2017
|
||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Example URL: https://www.dominos.com/en/pages/order/#/section/Food/category/AllEntrees/ Steps to reproduce the problem: 1. Set browser width to less than 640px 2. Browse to https://www.dominos.com/en/pages/order/#/section/Food/category/AllEntrees/ 3. Enter a zip code and choose a store 4. Select "build your own pizza" 5. Notice left chevron image in red-and-blue progress bar is blank white What is the expected behavior? both chevrons should render. Chrome 56, Safari, and Firefox, internet explorer, and Edge all look fine. What went wrong? I extracted a reduced test case. See attached file, compare rendering in chrome 56 vs chrome 57. By removing any ONE or more of the following from the css, the bug goes away: backface-visibility, z-index, 1 or both of the two border-radius, 1 or both of the two overflow: hidden Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? Yes 56 Does this work in other browsers? Yes Chrome version: 57.0.2987.133 Channel: stable OS Version: OS X 10.12.4 Flash Version: doesn't break commerce but a huge number of users will see this as chrome 57 rolls out.
,
Apr 10 2017
Able to reproduce the issue on Windows 10, Ubuntu 14.04 and Mac 10.12.3 using reported version #57.0.2987.133 and latest canary #59.0.3066.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. Note: Adding label ReleaseBlock-Stable, as it seems to be a recent regression. Thanks...!!
,
Apr 10 2017
,
Apr 13 2017
schenney@ Can we we target the fix before next Beta Release which would be the Pre-Stable candidate. If the bug is not critical, please feel to punt to next milestone. FYI: RC cut @ 4.00 PM Tuesday 04/17.
,
Apr 13 2017
Original reporter, is it possible for you to remove backface-visibility: hidden on the "button" class? That will work around the bug and should have no effect unless you are 3D transforming content. The backface-visibility is causing separate compositing layers for the button elements. That's not very efficient on such small non-scrolling content. Meanwhile I'll try to reduce further and fix.
,
Apr 14 2017
Thanks for the updates schenney ... we can pull out the backface-visibility. Appreciate it!
,
Apr 14 2017
The issue is that missing separator elements are all squashed into a layer, and that squashing layer is a sibling of the masked button layers. Interestingly, in content_shell we do not squash those separators. Maybe the mask is not big enough in this case?
,
Apr 14 2017
,
Apr 14 2017
Fix momentarily.
,
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
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e50892ab6838d9359efbf309035f792c3e68b25b commit e50892ab6838d9359efbf309035f792c3e68b25b Author: schenney <schenney@chromium.org> Date: Mon Apr 17 21:33:19 2017 Fix clipping of squashed sibling layers with border radius masks When a composited element with a border-radius overflow parent has border radius and overflows itself, the element's clip rect is included on the mask layer for the parent, which causes incorrect clipping of sibling content. Unfortunately a ref test fails due to a single pixel different on the border radius. R=chrishtr@chromium.org BUG= 709533 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2821733002 Cr-Commit-Position: refs/heads/master@{#465028} [modify] https://crrev.com/e50892ab6838d9359efbf309035f792c3e68b25b/third_party/WebKit/LayoutTests/FlagExpectations/enable-slimming-paint-v2 [add] https://crrev.com/e50892ab6838d9359efbf309035f792c3e68b25b/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.png [add] https://crrev.com/e50892ab6838d9359efbf309035f792c3e68b25b/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.txt [add] https://crrev.com/e50892ab6838d9359efbf309035f792c3e68b25b/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child.html [modify] https://crrev.com/e50892ab6838d9359efbf309035f792c3e68b25b/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp
,
Apr 17 2017
,
Apr 17 2017
Approved for M58 branch 3029 and M59 branch 3071.
,
Apr 18 2017
I'll merge first thing tomorrow morning (east coast time).
,
Apr 18 2017
Verified the issue on windows 10, Mac 10.12.4 and Ubuntu 14.04 using chrome version #60.0.3074.0 as per comment #0. Observed that both chevrons rendered as expected. Hence, the fix is working as expected. Attaching screenshot for reference. Hence, adding the verified labels. Thanks...!!
,
Apr 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/9334d38e3e4cc900a2987689269807ddc7bda09c commit 9334d38e3e4cc900a2987689269807ddc7bda09c Author: Stephen Chenney <schenney@chromium.org> Date: Tue Apr 18 14:04:48 2017 Fix clipping of squashed sibling layers with border radius masks Merge to M-59 branch. When a composited element with a border-radius overflow parent has border radius and overflows itself, the element's clip rect is included on the mask layer for the parent, which causes incorrect clipping of sibling content. Unfortunately a ref test fails due to a single pixel different on the border radius. TBR=chrishtr@chromium.org BUG= 709533 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2821733002 Cr-Original-Commit-Position: refs/heads/master@{#465028} Review-Url: https://codereview.chromium.org/2826673003 . Cr-Commit-Position: refs/branch-heads/3029@{#740} Cr-Branched-From: 939b32ee5ba05c396eef3fd992822fcca9a2e262-refs/heads/master@{#454471} [modify] https://crrev.com/9334d38e3e4cc900a2987689269807ddc7bda09c/third_party/WebKit/LayoutTests/FlagExpectations/enable-slimming-paint-v2 [add] https://crrev.com/9334d38e3e4cc900a2987689269807ddc7bda09c/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.png [add] https://crrev.com/9334d38e3e4cc900a2987689269807ddc7bda09c/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.txt [add] https://crrev.com/9334d38e3e4cc900a2987689269807ddc7bda09c/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child.html [modify] https://crrev.com/9334d38e3e4cc900a2987689269807ddc7bda09c/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp
,
Apr 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/eb714ee2495710bfdabad870fd9be463a3fc61c8 commit eb714ee2495710bfdabad870fd9be463a3fc61c8 Author: Stephen Chenney <schenney@chromium.org> Date: Tue Apr 18 14:11:23 2017 Fix clipping of squashed sibling layers with border radius masks Merge to M-59 branch. When a composited element with a border-radius overflow parent has border radius and overflows itself, the element's clip rect is included on the mask layer for the parent, which causes incorrect clipping of sibling content. Unfortunately a ref test fails due to a single pixel different on the border radius. TBR=chrishtr@chromium.org BUG= 709533 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2821733002 Cr-Original-Commit-Position: refs/heads/master@{#465028} Review-Url: https://codereview.chromium.org/2825743002 . Cr-Commit-Position: refs/branch-heads/3071@{#31} Cr-Branched-From: a106f0abbf69dad349d4aaf4bcc4f5d376dd2377-refs/heads/master@{#464641} [modify] https://crrev.com/eb714ee2495710bfdabad870fd9be463a3fc61c8/third_party/WebKit/LayoutTests/FlagExpectations/enable-slimming-paint-v2 [add] https://crrev.com/eb714ee2495710bfdabad870fd9be463a3fc61c8/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.png [add] https://crrev.com/eb714ee2495710bfdabad870fd9be463a3fc61c8/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child-expected.txt [add] https://crrev.com/eb714ee2495710bfdabad870fd9be463a3fc61c8/third_party/WebKit/LayoutTests/compositing/nested-border-radius-composited-child.html [modify] https://crrev.com/eb714ee2495710bfdabad870fd9be463a3fc61c8/third_party/WebKit/Source/core/paint/PaintLayerPainter.cpp
,
Apr 18 2017
Sorry I got the change description wrong on the M-58 merge. We're all done here.
,
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 both chevrons rendered as expected. As the fix is working as expected ,adding the TE verified labels. Attaching screenshot for reference. Thanks...!!
,
Apr 20 2017
Rechecked the issue on Windows 10, MAC 10.12.4, Ubuntu 14.04 using chrome version 59.0.3071.15 using test case provided in Issue description. Fix is working as intended. Attached screen shot for the same. Adding TE-Verified labels. Thanks.!
,
Apr 20 2017
One thing to note, if you look the original index.html I attached, or if you look at the screenshots others have posted in this ticket, you can see the top and bottom of both chevrons is fuzzy or blurred. It is caused by the css rule in the index.html that is scaling those chevron images to 12 pixels, and seems to only happen on retina displays. This can be fixed by adding "image-rendering: -webkit-optimize-contrast;" Is that working as intended (i.e. using -webkit-optimize-contrast is expected) or is it a bug? And should a new bug report be opened for that?
,
Apr 20 2017
I believe the blurring is due to filtering for the resize, so it is working as intended. |
||||||||||||||
►
Sign in to add a comment |
||||||||||||||
Comment 1 by ligim...@chromium.org
, Apr 7 2017