css - 带有背景图像的 Div + 比例变换 = Safari 上的模糊

Question

每当我在带有背景图像的 div 上使用变换比例时，图像在 safari 上非常模糊。有没有办法解决它？其他浏览器没问题：

https://jsfiddle.net/omdek8r7/

请记住，此错误仅在 Safari 上可见。

.wrapper {
  transform: translate3d(0, 0, 0);
  display: inline-flex;
}

.bg {
  height: 50px;
  transition: all 0.3s ease;
  margin: 100px;
  background: url("https://via.placeholder.com/1000.png");
  width: 50px;
  background-position: center;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-filter: blur(0px);
}

.bg:hover {
  transform: translateZ(0) scale(4);
}

<div class="wrapper">
  <div class="bg"></div>
</div>

标签： csssafari