元视口（固定宽度）在具有背景颜色的透明图像上导致不需要的边框

Question

请注意，当运行以下所有片段时，要全面了解问题：请在移动视图上查看（例如，使用 chrome 开发人员工具中的切换设备工具栏功能）。

这张图片很好（没有使用元视口）

.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>

但是，当我使用代码时<meta name="viewport" content="width=1440">
并在移动视图上查看了页面（即让元视口启动）
透明图像上的边框开始出现...

这是产生不需要的边框的示例：

.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>

使用移动视图查看出现的不需要的边框

问题：为什么会出现这种情况，如何使用CSS来防止出现这样的边框？

注：

使用 Google Chrome 74.0.3729.131 和 Opera 58.0.3135.132（均为移动视图）进行测试
Mozilla 上似乎没有出现此问题（使用版本 66.0.5 测试）

Answer 1

问题不在于视口标签，它与它没有任何关系。它与浏览器上的渲染有关。问题是图像不能正确地适合图像，因为它会产生类似填充的效果，导致看到 background-color。 例如，尝试将背景颜色更改为白色，然后看到更多类似边框的效果消失。

Answer 2

我已经使用以下方法解决了这个问题：

我将图像包裹在 inline-block 元素中
在该包装器上，我分配了以下 CSS 属性：

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

在图像元素上，我将它缩放了一点，这样边框就不会出现了

.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>

元视口（固定宽度）在具有背景颜色的透明图像上导致不需要的边框

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

css

google-chrome

opera

使用移动视图查看出现的不需要的边框