CSS filter not applied correctly on all cards inside card-column in Chrome #19060
Description
Not sure if this should be reported here or to Chrome-dev, but here goes:
When applying a desaturation filter to images on cards wrapped in a card-column, only the left-most column of images are shown properly in Chrome. The rest are not showing up on screen.
I have put the minimal example code below through bootlint with no errors. It works fine in both Safari and Firefox. Can anyone confirm this behavior with bootstrap 4?
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Minimal filter on multiple cards in card-columns</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<!-- My desaturation filter -->
<style type="text/css">
.my-img-muted {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
}
</style>
</head>
<body>
Plain cards works (5 cards with the same "Lena" image):
<div class="container">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
</div>
</div>Safari and Firefox display all of these desaturated. Chrome only displays the images in the left-most column desaturated and simply doesn't display the rest:
<div class="container">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid my-img-muted" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid my-img-muted" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid my-img-muted" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid my-img-muted" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
<div class="card">
<img class="card-img-top img-fluid my-img-muted" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="Lena">
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>