CSS text-shadow无法在移动版

Question

首先;大家好！我是社区的新人。多年来我一直在使用堆栈溢出而没有帐户，因为我总能找到答案。这个我不能，它一直在烦我！

我在我的网站的标题中的h2元素上使用text-shadow。它在我的桌面上正确显示（当前的Chrome，Edge和Firefox版本）。在我的手机（iPhone，当前的Chrome和Safari版本）上，它会显示您在下面的via stack overflow链接图片中看到的内容。

In this image you'll see 'blocks' with some sort of gradient shade instead of text-shadow

有没有人知道这里发生了什么/之前看过它并知道解决方案？

网站：http://schuttershoeve.nl

CSS:
    .content h2 {
        text-shadow: 0 0 20px #000000;
    }

• P.S。你现在无法重现错误;我已经使用媒体查询来移除移动网站的阴影作为现在的解决方法

Answer 1

您的解决方案是Polyfills。

即，在支持的地方使用CSS text-shadow，并使用不受支持的css背景图片。

请参阅http://modernizr.com/以检测text-shadow的支持情况。

如何使用Modernizr的教程：http://www.hongkiat.com/blog/modernizr/

TLDR：

如果检测到浏览器不支持文本阴影，则Modernizr会向您的HTML元素添加一个CSS类.no-textshadow。

然后，就像在.no-textshadow .text-stroke {}

中提供CSS的后备问题一样。

Answer 2

解决方案：好的，它与盒子阴影和文本阴影相结合。你看到的渐变是盒子阴影。我决定在所有屏幕宽度上使用非渐变盒子阴影解决方案，以使我的文本更具可读性。感谢输入！