使用CSS 3D变换缩放后，Firefox和Safari中的图像像素化问题

编程问答 2022-06-03

问题描述

我遇到了这个问题，在Safari和Firefox中，当我应用3d变换以将其缩放到div时，即使加载了高质量的图像，图像（设置为背景图像）仍显示为像素化。另一方面，在Chrome中，它可以正常工作而不会出现像素化。

结果是，如果我增加容器的宽度，则图像看起来会更好，但浏览器不应该尊重我已加载的图像大小，而不是我正在加载的容器的大小。

我试图在此Codepen中用最少的代码来复制问题： https://codepen.io/Acesmndr/pen/zYBmVmy 

.body {
  margin: auto;
  padding: 0;
  Box-sizing: border-Box;
  user-select: none;
  transform-style: preserve-3d;

 }
.Box {
  width: 3vw;
  height: 3vh;
  display: flex;
}
.square {
  width: 20vw;
  transform: scale3D(40,40,40) translateX(50%);
}
.square::before {
  content: '';
  position: absolute;
  background-image: url('https://miro.medium.com/max/3200/1*T8LN_mDq8vNrD63IIIgzjQ.png');
  background-size: contain;
  width: 100%;
  background-repeat: no-repeat;
  height: 100%;
}
<div class='body'>
  <div class='Box'>
    <div class='square'></div>
  </div>   
</div>

在Safari中：

Safari

在Chrome或Firefox中使用同一段代码：

Chrome

在此示例中，它在Safari中看起来像是像素化的，但在Chrome和Firefox中却清晰可见（尽管由于相同的问题，我的应用仍在Firefox中崩溃。

Link to my app that's breaking in safari and firefox。

如何让浏览器在分配的容器大小上尊重图像大小？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

background-imagefirefoxfirefoximage-resizingsafari