Chrome显示Lottie动画模糊

Question

我有一个问题，比例乐天动画，Chrome模糊了动画。当动画被缩放时，这是特别可见的。

在我的示例中，原始动画是842x596px，因为它越小，呈现效果越差：

​

​

下面是示例代码，如果您想在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

​

似乎已经有其他问题有类似的问题，但没有提供进一步的信息或没有提供一个有效的解决方案：

• Lottie animation blurry on Chrome only
• Blurry content on css animation on Chrome
• Blurry text after using CSS transform: scale(); in Chrome

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

​