Android Chrome多行文字阴影渲染与模糊

当涉及到文字阴影渲染与大字体化和模糊时，我经历了Android（6.0.1）Chrome浏览器（54.0.2840.68）中的一个奇怪的错误。据报道，它也出现在MacOS Chrome中，但我无法复制它。Android Chrome多行文字阴影渲染与模糊

我浓缩成问题作进一步调查一小笔： http://codepen.io/quarkus/pen/BQaBGj

这一点，在很短的风格的标题我试图渲染。

h1 { 
    font-family: sans-serif; 
    text-transform: uppercase; 
    font-size: 60px; 
    margin: 0; 
    color: white; 
    line-height: 1.2; 
} 

h1.shadow { 
    text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1); 
}

.filter，.fix3d和.fix是这些类只是试图通过在3D渲染上下文头条（或通过创建影子作为模糊：前），以解决这个问题。

这是它的外观的大多数Android设备：

s.codepen.io/quarkus/debug/BQaBGj on the device

有没有人经历过那种渲染的，可以指向我一个解决方案吗？

感谢马库斯

编辑：忘了一两件事。它只有在页面被用户本身“缩放”时才会发生，或者通过像下面这样的meta标签来标记页面： <meta name="viewport" content="width=device-width, initial-scale=1"> 就像它在笔中一样。

来源

2016-11-09 mr_quok

我在https://businessimages.ch（右上方）遇到同样的问题。这似乎只发生在某些版本的Chrome/Android上，因为我在我办公室的两台不同设备上进行了测试。它确实发生在最新的三星Galaxy 7上，我假设它是最新版本的Android。我确实有元视口标记集（但在我的情况下，这不是一个解决方案）。任何信息都会很棒！ – ynamite

我肯定会在Browserstack设备（Galaxy和Nexus手机）上获得此设备，但我没有在设备上看到它，但我没有大量设备需要检查。

但是什么固定它，我正在改变和阻挡的文字：

.text { 
    transform: translateZ(0); 
    display: inline-block; 
}

不是一个很好的修复，因为我需要我的文字display: inline，但它的工作原理。

来源

2017-03-21 16:25:17

Android Chrome多行文字阴影渲染与模糊

回答

相关问题