Bug 155823 – multi-column + border-radius + overflow:hidden = no background-image

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Chris Rebert]

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.

[Chris Rebert]

Created attachment 274808 [details]
Screenshot of correct rendering in Firefox 47

[Simon Fraser (smfr)]

Have you tried a recently nightly?

[Simon Fraser (smfr)]

This was fixed in http://trac.webkit.org/changeset/195453.

*** This bug has been marked as a duplicate of bug 152920 ***

[Chris Rebert]

(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!