Bug 155823 - multi-column + border-radius + overflow:hidden = no background-image
Summary: multi-column + border-radius + overflow:hidden = no background-image
Status: RESOLVED DUPLICATE of bug 152920
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/cvrebert/q7750s03/
Keywords: HasReduction
Depends on:
Blocks:
 
Reported: 2016-03-23 18:43 PDT by Chris Rebert
Modified: 2016-03-23 19:14 PDT (History)
1 user (show)

See Also:


Attachments
Screenshot of incorrect rendering in Safari 9.1 (36.25 KB, image/png)
2016-03-23 18:43 PDT, Chris Rebert
no flags Details
Screenshot of correct rendering in Firefox 47 (110.72 KB, image/png)
2016-03-23 18:46 PDT, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2016-03-23 18:43:21 PDT
Created attachment 274806 [details]
Screenshot of incorrect rendering in Safari 9.1

Original Bootstrap bug: https://github.com/twbs/bootstrap/issues/19600
Similar Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=597471

Steps to reproduce:
1. Open https://jsfiddle.net/cvrebert/q7750s03/ in OS X Safari 9.1
2. Observe the right square.

Expected results:
The right square should match the left square and show a pentagram image.
See attached Firefox screenshot.

Actual results:
The right square doesn't match the left square.
The right square is solid white instead of showing a pentagram image.
See attached Safari screenshot.

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 shown by WebKit.

More info:
Removing the `border-radius` or the `overflow:hidden` from the example avoids triggering the bug.
Firefox 47, Chrome Canary 51, and Edge 13 all render the example correctly.
Comment 1 Chris Rebert 2016-03-23 18:46:49 PDT
Created attachment 274808 [details]
Screenshot of correct rendering in Firefox 47
Comment 2 Simon Fraser (smfr) 2016-03-23 18:50:19 PDT
Have you tried a recently nightly?
Comment 3 Simon Fraser (smfr) 2016-03-23 18:56:59 PDT
This was fixed in http://trac.webkit.org/changeset/195453.

*** This bug has been marked as a duplicate of bug 152920 ***
Comment 4 Chris Rebert 2016-03-23 19:14:11 PDT
(In reply to comment #2)
> Have you tried a recently nightly?

No, I hadn't, since the original https://trac.webkit.org/wiki/WebKitNightlyElCapWorkaround was so hairy.
Looks like the new version of the workaround is somewhat less hairy though.
But having to reapply it after every future 10.x.y release still bites.

Glad to hear that this rendering bug has been fixed in Nightly!