multi-column + filter + border-radius + overflow:hidden = no background-image
Reported by
cvreb...@gmail.com,
Mar 24 2016
|
|||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 Steps to reproduce the problem: 1. Open https://jsfiddle.net/cvrebert/fmsm1p9p/ (or the attached HTML file) in Chrome 2. Look at the square on the right What is the expected behavior? Both the left and the right squares should be identical and each show a blurred pentagram. What went wrong? The square on the right doesn't show a blurred pentagram. It shows a black word on a white background instead. Did this work before? N/A Chrome version: 51.0.2688.0 Channel: canary OS Version: OS X 10.11.4 Flash Version: Shockwave Flash 21.0 r0 Original Bootstrap bug report: https://github.com/twbs/bootstrap/issues/19600 For some reason, when combined with certain other CSS properties, the `background-image` of boxes in columns in CSS multi-column layouts (other than the 1st column) isn't displayed. Removing any of the following CSS properties in the example avoids triggering the bug: * filter * border-radius * overflow:hidden Firefox 47 renders the example correctly. Safari 9.1 suffers from the same bug as Chrome. Edge 13 doesn't seem to apply the blur filter to either square for some reason.
,
Mar 24 2016
Related fixed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=152920
,
Mar 24 2016
,
Mar 24 2016
,
Mar 24 2016
I'll at least see if the WebKit patch works for us.
,
Mar 31 2016
That's not going to work. WebKit has some multicol awareness in (Paint|Render):Layer::convertToLayerCoords() which Blink doesn't have.
,
Oct 20 2017
The assigned owner "mstensho@opera.com" is not able to receive e-mails, please re-triage. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 20 2017
,
Oct 20 2017
,
Nov 7 2017
,
Nov 16 2017
,
Nov 27 2017
,
May 18 2018
I'm seeing a similar issue here: https://noti.st/xeraa/XUCAS4/centralized-logging-patterns This is with embedded tweets in a multicol, but seems to be the same issue as if I disable bits of the CSS in the embed I can get the tweet contents to display. Screenshot attached.
,
May 18 2018
What version of Chrome, on what platform, are you still seeing this?
,
May 18 2018
Strangely enough, we see it on one computer (Mac, 10.13.4, Chrome Version 66.0.3359.181) and not on another which has the same config. We were alerted to it from customer bug reports, however I had never seen the issue as I can't get it to manifest on my system. Drew here doesn't see it if he uses Canary, but can see it in Version 66.0.3359.181). We've had a number of customer reports of it however, all in Chrome.
,
May 18 2018
Maybe attach the output of "chrome://gpu" and "chrome://version" for both the working and non-working machines? There is clearly something different in the config.
,
May 19 2018
Did a bit more poking around, looks like the difference is that I had Experimental Web Platform Features enabled and he doesn't. I can reproduce the issue if I disable the flag. The example in the original bug report also behaves in the same way, with the flag enabled I get the content of both columns, disable it and the issue manifests.
,
May 21 2018
Thanks very much for identifying the conditions to reproduce this. Fortunately it will make it much easier to track down the problem too. Assigning for a first pass.
,
May 21 2018
Ideally someone more familiar with painting and compositing should look into this. I won't have the capacity to prioritize this at the moment.
,
May 21 2018
I'll own it them. |
|||||||||||||||
►
Sign in to add a comment |
|||||||||||||||
Comment 1 by cvreb...@gmail.com
, Mar 24 201665.5 KB
65.5 KB View Download
186 KB
186 KB View Download