【问题标题】:Blurry div after css transform/transitioncss变换/过渡后的模糊div
【发布时间】:2016-09-21 17:53:36
【问题描述】:

按照此演示 http://css3.bradshawenterprises.com/sliding/ 的指示处理内容滑块

但是对于我的,我注意到我的内容,在这种情况下是几个 div,在 css 转换完成后变得有点模糊。在最新版本的 Firefox、Safari 和 Opera 中对其进行了测试,并且运行良好。所以模糊只发生在 Chrome 中(我在 22.0.1229.79)

关于这可能是什么,或者如何解决它的任何想法?

http://jsfiddle.net/SYYhS/5/

【问题讨论】:

  • 嗯 - 我在 Chrome 21.0.1180.89/Mac 中,没有看到问题。过渡后,这些框对我来说似乎很好。你能张贴你看到的截图吗?
  • @chipcullen 在 Firefox 15.0.1 中看起来也不错。
  • Chrome 22.0.1229.79/Windows 在这里,我绝对可以看到它。我认为这与像素边缘有关,但我似乎找不到我读过的文章...
  • 给你 - 检查这个 SO 线程,看看它是否有帮助。 stackoverflow.com/questions/9311428/… -- 但也许这只适用于画布......
  • @chipcullen 这是一个比较。它并没有太大的不同,但模糊肯定存在。 d.pr/i/jOsd

标签: css css-transitions css-transforms


【解决方案1】:

一半像素的问题。

尝试:transform: translate(-50%, -51%); 或者,尝试将 div 尺寸设置为偶数。

它会起作用的!

【讨论】:

    猜你喜欢
    • 2016-10-01
    • 1970-01-01
    • 2020-01-31
    • 1970-01-01
    • 2015-06-24
    • 2018-09-09
    • 1970-01-01
    • 1970-01-01
    • 2017-09-12
    相关资源
    最近更新 更多