Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS filter not applied correctly on all cards inside card-column in Chrome #19060

Closed
Doerge opened this issue Feb 1, 2016 · 3 comments
Closed

CSS filter not applied correctly on all cards inside card-column in Chrome #19060

Doerge opened this issue Feb 1, 2016 · 3 comments
Labels
browser-bug css v4

Comments

@Doerge
Copy link

Doerge commented Feb 1, 2016

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>
@cvrebert
Copy link
Collaborator

cvrebert commented Feb 1, 2016

Neat find.
Since this involves custom CSS and doesn't sound particularly Bootstrap-specific, please file a Chrome bug instead. Thanks!

@cvrebert cvrebert closed this as completed Feb 1, 2016
@cvrebert
Copy link
Collaborator

cvrebert commented Feb 1, 2016

Perhaps related to #18802.

@Doerge
Copy link
Author

Doerge commented Feb 1, 2016

Your memory is better than my Google-fu! kevin-quach's solution by using -webkit-backface-visibility: hidden; solves this.

I opened https://code.google.com/p/chromium/issues/detail?id=583084 as I couldn't find anything similar in their issue tracker.

Thanks!

@MartijnCuppens MartijnCuppens mentioned this issue Jun 18, 2019
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-bug css v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cvrebert @Doerge