【问题标题】:iframe content causes the text on my page to go blurryiframe 内容导致我页面上的文本变得模糊
【发布时间】:2019-02-10 12:30:46
【问题描述】:

我的页面上有一个 iframe 容器,当我单击按钮时会加载地图。并且由于某种原因,当地图加载时,它会导致周围的物体变得模糊。

示例: https://i.postimg.cc/xCfJWwZG/beforeafter.png

我尝试将 -webkit-font-smoothing: subpixel-antialiased; 添加到 CSS 中的各种内容和 transform: scale(1.0) translate3d(0,0,0); 中,这只会使对象永久模糊。如何阻止 iframe 搞砸我的页面。

【问题讨论】:

  • 您是否尝试将其包装在容器中并将其position 设置为relative
  • 将其添加为答案,以便有类似问题的人找到它。请接受它干杯!

标签: html css iframe blurry


【解决方案1】:

将其添加为答案,以便寻找类似问题的人找到它。

有时iframe 的内容在内部具有绝对定位的元素,如果iframe 未将relative 定位到某个容器,则由于css 定位可能会占据整个屏幕。

所以在这种情况下,这似乎是问题所在。

所以尝试将iframe 包装在一个容器中并设置它的position:relative 来修复它。

【讨论】:

  • 抱歉,问题似乎又卷土重来了。现在它使我页面上的所有内容再次变得模糊,并将其放在带有 position:relative 的 div 中没有帮助?
  • 请提供实时链接或重现问题的方法,以便我查看并尝试查看问题所在..
【解决方案2】:

问题很可能不是由 position:absolute css 属性直接引起的,而是由 iframe 的子像素定位引起的抗锯齿引起的。

无论是使用 % 值定位还是使用具有 % 值的变换,iframe 都可能无意中定位在子像素位置,即左侧设置为 10%,计算结果为 10.5 像素。这会导致 iframe 内容显得模糊。

在我的情况下,像在祖先元素上填充奇数值 (35px) 这样简单的东西会导致宽度的奇数值,然后 iframe 上的 left:10% 足以导致问题,将填充设置为偶数则消除了问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-10-01
    • 2014-11-23
    • 2014-02-27
    • 1970-01-01
    • 1970-01-01
    • 2012-03-20
    • 1970-01-01
    • 2017-09-13
    相关资源
    最近更新 更多