Search code examples
cssgoogle-chromeopera

Meta Viewport (Fixed Width) Causing Unwanted Borders on a Transparent Image that has Background Color

Note that when running all snippets below, to get a full understanding of the issue: please view on mobile-view (example, use toggle device toolbar feature from chrome developer tools).

This image is fine (not using meta viewport)

.image-ok {
  height: 300px;
  width: 300px;
  background-color: purple;
}
<html>

  <body>
    <img class="image-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
  </body>

</html>


However, when I used the code <meta name="viewport" content="width=1440">
and viewed the page on mobile view (i.e., let the meta viewport kick in)
borders on the transparent image start appearing ...

Here is the sample that produces the unwanted borders:

.image-not-ok {
    background-color: black;
}
<html>

  <head>
    <meta name="viewport" content="width=1440">
  </head>

  <body>
    <img class="image-not-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
  </body>

</html>

Use mobile view to see the unwanted borders appearing

enter image description here

Question: Why does this happen and how can I use CSS to prevent such borders from appearing?

Note:

  • Tested using Google Chrome 74.0.3729.131 and Opera 58.0.3135.132 (both mobile view)
  • The issue seems to not occur on Mozilla (tested using version 66.0.5)
Solution

  • I've fixed this using the following methods:

    1. I wrapped the image in a inline-block element
    2. On that wrapper, I assigned the following CSS properties:
    .image-wrapper {
    display: inline-block;
    overflow: hidden;
    backface-visibility: hidden;
}
    1. On the image element, I scaled it a bit so that the borders won't appear
    .image-ok {
    background-color: black;
    transform: scale(1.02);
}


    .image-wrapper {
  display: inline-block;
  overflow: hidden;
  backface-visibility: hidden;
}

.image-ok {
  background-color: black;
  transform: scale(1.02);
}
    <div class="image-wrapper">
  <img class="image-ok" src="https://i.ibb.co/mTPWBWC/shirt.png">
</div>