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

Question

我在Android (6.0.1) Chrome浏览器(54.0.2840.68)中遇到了一个奇怪的bug，当涉及到大字体和模糊的文本阴影渲染时。据报道，它也出现在MacOS 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上下文中渲染标题(或通过将阴影创建为模糊的:之前)来解决此问题。

这是大多数安卓设备的外观：

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

有没有人体验过这种渲染，并能给我一个解决方案？

谢谢马库斯

编辑:忘记了一件事。只有当页面由用户自己或通过在笔中设置一个元标记(如：<meta name="viewport" content="width=device-width, initial-scale=1"> )进行“缩放”时，才会发生这种情况。

Answer 1

我肯定是在Browserstack设备(Galaxy和Nexus手机)上得到的，我还没有在设备上看到它，但我没有太多的设备要检查。

然而，对我来说，修复它的方法是转换和阻塞文本：

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

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