Chrome+Safari bug: background-image in non-1st column of multi-column layout isn't displayed

[MickeyElliott]

Seems like cards with a background-image set via css are not rendering the background-image in any column except the first column. -webkit-column-count: 3;

My data-attributes are rendering a <style> in ther header.

<div class="card-columns">
    <div class="card card-inverse">
        <div class="card-block bg-img" data-img-src="http://placehold.it/870x489" data-img-blur="5" data-img-opacity="1">
            <h5 class="card-title">Test</h5>
            <p class="card-text">xxxxxxxx xxxxxxxx </p>
        </div>
    </div>
</div>

https://jsfiddle.net/MickeyElliott/gamy6Lrs/

[cvrebert]

@MickeyElliott Please make a JS Bin or JS Fiddle that demonstrates the problem.

[MickeyElliott]

Here you go!
https://jsfiddle.net/MickeyElliott/gamy6Lrs/

Works as expected in IE Edge and Firefox. Looks like it may be specific to Google Chrome.

[cvrebert]

Confirmed in Safari 9.1 and Chrome Canary. Looks like a bug in WebKit/Blink's implementation of CSS multi-column layout.

[cvrebert]

Reduced testcase for Chrome: https://jsfiddle.net/cvrebert/8dskgzah/

[cvrebert]

Hmm, I guess Chrome has multiple bugs, at least one of which is already fixed in Canary; my testcase doesn't repro in Canary 51. Guess I'll try again.

[MickeyElliott]

I'm working on a solution. I've found a partial solution so far.

https://jsfiddle.net/MickeyElliott/tukyontb/45/

[cvrebert]

New reduced testcase for Safari & Chrome Canary: https://jsfiddle.net/cvrebert/fmsm1p9p/

[cvrebert]

Filed Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=597471

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=155823

[cvrebert]

Closing since this isn't a bug in Bootstrap per se (since custom CSS is involved), and we've filed upstream bugs with the browser vendors.

[cvrebert]

The Safari bug has already been fixed in WebKit Nightly: https://bugs.webkit.org/show_bug.cgi?id=155823#c3

[MickeyElliott]

Thank you. I hope to see a fix from the vendors soon!

[cvrebert]

MS Edge also seems to suffer from a filter bug that affects your example, though it's not related to multi-column:
https://connect.microsoft.com/IE/feedback/details/2518512/edge-border-radius-overflow-hidden-ignored-filter-blur-5px