我有縮放 Lottie 影片的問題，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 影片僅在 Chrome 上模糊
- Chrome 上的 CSS 影片內容模糊
- 使用 CSS 變換后模糊文本：scale(); 在鉻
uj5u.com熱心網友回復：
該問題是由 Lottie 影片中 SVG 上的以下樣式標簽引起的：
translate3d(0px, 0px, 0px);
最簡單的解決方法是通過 JS 去掉這個標簽：
let elements = document.getElementsByTagName('lottie-player');
for (var i = 0; i < elements.length; i ) {
console.log(elements[i].shadowRoot);
if(elements[i].shadowRoot.querySelector('svg')) {
elements[i].shadowRoot.querySelector('svg').style.transform = '';
}
}
顯示代碼片段
setTimeout(() => {
let elements = document.getElementsByTagName('lottie-player');
for (var i = 0; i < elements.length; i ) {
if(elements[i].shadowRoot.querySelector('svg')) {
elements[i].shadowRoot.querySelector('svg').style.transform = '';
}
}
}, 2000);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轉載請註明出處，本文鏈接：https://www.uj5u.com/net/483605.html