Question

我在Android（6.0.1）Chrome浏览器（54.0.2840.68）中遇到了一个奇怪的错误，当涉及到具有大字体和模糊的文本阴影渲染时。据报道，虽然我无法重现它，但它也出现在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的文字，但它有效。

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

1 个答案: