具有文本阴影滞后的Firefox，在Chrome / Edge上正常运行

Question

我正在创建一个网站，但文本阴影和Firefox出现问题。大约有100个div，其中的背景包含文本，并且具有以下CSS：

.hex {
    position: absolute;
    user-select: none;
    outline: none;
    writing-mode: vertical-lr;
    text-orientation: upright;
    cursor: pointer;
    opacity: 0.2;
    text-shadow: 0px 0px 3px rgba(148, 0, 211, 1)
}

即使在Edge上也可以正常工作，但是Firefox似乎存在文本阴影问题；如果我实际上禁用了此规则，它在Firefox上也可以正常工作。

通过稍微测试，似乎在使用filter: drop-shadow(0px 0px 3px rgba(148, 0, 211, 1)时FF的性能略有提高；另一方面，它在Chrome / Edge上很烂。

这里最好的解决方案是什么？为什么FF在文本阴影下挣扎？

Answer 1

我进行了一些测试，似乎Firefox将不会接受rgba属性中带有text-shadow的值。您在代码中使用了不透明度1，因此那里没有用，请尝试将其更改为text-shadow: 0px 0px 3px rgb(148, 0, 211)