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>
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?
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: