Chrome显示Lottie动画模糊。

Question

我遇到了一个问题，放大缩小的Lottie动画在Chrome浏览器中显示模糊。这种现象尤其在缩放时更加明显。

例如，在我的示例中，原始动画大小为842x596像素，当它越小，渲染的结果就越差：

以下是示例代码，您可以在Chrome浏览器中复制并运行：

lottie-player {
  border: 1px solid lightblue;
}

body {
  color: lightgray;
}

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px 
-->
                    
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px

<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player>
50x50px

---

看起来已经有其他问题与此类似，但它们没有提供更多信息或没有提供有效的解决方案：

• 仅在Chrome上Lottie动画模糊
• Chrome上css动画中内容模糊
• 使用CSS transform: scale()后Chrom中文字模糊

- wittich

---

为什么会有负面评价？这个问题有什么问题吗？ - wittich

Answer 1

问题是由Lottie动画中SVG内部以下样式标签引起的：

transform: translate3d(0px, 0px, 0px);

最简单的解决方法是通过JS删除此标签：

document.addEventListener("DOMContentLoaded", function(){

  let elements = document.getElementsByTagName('lottie-player');

  for (var i = 0; i < elements.length; i++) {
  
    elements[i].addEventListener('play', (event) => {
      // console.log(event.target.shadowRoot.querySelector('svg').style.transform);
      event.target.shadowRoot.querySelector('svg').style.transform = '';
    });
    elements[i].play(); // trigger (again)

  }
});

document.addEventListener("DOMContentLoaded", function(){

  let elements = document.getElementsByTagName('lottie-player');

  for (var i = 0; i < elements.length; i++) {
  
    elements[i].addEventListener('play', (event) => {
      // console.log(event.target.shadowRoot.querySelector('svg').style.transform);
      event.target.shadowRoot.querySelector('svg').style.transform = '';
    });
  
  }

});

lottie-player {
  border: 1px solid lightblue;
}

body {
  color: lightgray;
}

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px 
-->
                    
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px

<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
 
 <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player>
50x50px

- wittich

---

谢谢，我这里也遇到了相同的问题， 我用覆盖样式修复了它，像这样：.container { > svg { transform: unset !important; } }。 - GuaHsu