html - 如何让Firefox中大图的缩放过渡更平滑? (就像在 Chrome 中一样)

标签 html css firefox css-transitions transition

我遇到了麻烦,当我需要旋转大图像(大约 3000 - 5000 像素)时,它已经缩放到 0.1 - 在 Firefox 中它变得不平滑。我认为,这取决于 Firefox 渲染引擎,因为在 Chrome、Opera 和 Safari 中一切正常。 您如何看待,是否可以在 FF 中做同样的事情?

这里是 jsfiddle (你需要在 FF 中将鼠标悬停在圆圈上)。

.item {
    width: 3000px;
    height: 3000px;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    transition: all 5s linear;
}

.item:hover {
   -webkit-transform: rotate(100deg) scale(0.1);
   transform: rotate(100deg) scale(0.1);
}

最佳答案

检查图像渲染 css 属性: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

不幸的是,默认设置在 Firefox 上是最优化的,正如您所说,此任务由浏览器本身处理,因此您几乎无能为力。

关于html - 如何让Firefox中大图的缩放过渡更平滑? (就像在 Chrome 中一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22660679/

相关文章:

javascript - 删除 Firefox SDK 工具栏的关闭按钮

javascript - 单击时旋转/动画光标 -45 度?

javascript - 选择更改下拉选项时的特定表单

html - 视频作为背景未加载

javascript - 即使服务器返回适当的响应 header ,Firefox 也不允许 CORS 请求

google-chrome - 为什么网络浏览器不添加 lua vm?

javascript - 如何通过声明到标签中的调用来传递事件数据?

css - 如何让文本显示在先前的 div 区域之外?

javascript - css float 元素错误

JavaScript 在屏幕宽度 < 480 时执行脚本,而不是在屏幕宽度大于 > 480 时执行脚本?