css - 添加 CSS 动画会对 Chrome 中的图像渲染产生负面影响

标签 css google-chrome animation transform image-rendering

我遇到一个问题,即向 PNG 图像添加 CSS 动画会导致图像渲染质量急剧下降。

我有一个包含三个独立 PNG 的 div,向任何图像添加动画时,所有图像的质量都会降低。

动画包含一个变换旋转,但将其单独添加到图像(在动画关键帧之外)不会导致质量下降。我还尝试删除应用于图像父元素的所有其他变换并删除其他属性(例如透视),但这没有帮助。质量下降仅在添加动画时出现。

我在 Chrome 中看到了这一点,图像的外观与添加图像渲染时的外观完全相同:-webkit-optimize-contrast

有没有人遇到过类似的问题?

最佳答案

我注意到当图像依赖于浏览器来减小图像尺寸时,这可能是 chrome 的一个问题。 Chrome 不是图像处理程序,在实现过渡时似乎更注重渲染速度而不是质量。在不需要显着调整大小的图像上尝试相同的动画,看看是否有帮助。

关于css - 添加 CSS 动画会对 Chrome 中的图像渲染产生负面影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23093009/

相关文章:

objective-c - 复制 iOS 7 主屏幕动画

jquery - 向后和向前滚动 jQuery 动画

css - 中心一个三 Angular 形

css - 我有一个图形在 IE 8 和 IE 9 中的自定义 Wordpress 主题中没有正确排列

angularjs - 检测用户是否使用 google chrome 的自动填充选项填写表单

javascript - 防止通过 CSS/JS/等在 Google Chrome 中重新绘制

animation - 应用变换矩阵后计算路径中心

css - Bootstrap SB 管理员 2 : button text-alignment not working in Chrome

html - Css 属性选择器,其中属性名称包含 : in it

html - Firefox 和 chrome 的 CSS 选择器扩展