css - Safari 中的文本阴影被截断/不渲染超出元素边界

Question

正如标题所说，我有一个文本阴影，内容如下:

body { background: white; }

h1 { 
    color: black;
    text-shadow: 100px 100px 10px black;
}

在 Safari 浏览器中，阴影被剪裁/不渲染超出元素边框的边缘。

奇怪的是，当我触发 body 背景颜色动画效果(将颜色从白色过渡到黑色的俗气)时，它似乎在过渡期间的短时间内正确地呈现在元素边界之外。然而，一旦过渡结束，阴影将在边界处再次被切断。

Answer 1

如果在转换过程中可见，添加-webkit-transform: translateZ(0);给它。应该管用。你确定切割它的元素没有溢出:隐藏吗？另一个想法:切割阴影的元素是否可能是 3d 变换的？如果是，那就是原因。它充当所有 child 的视口(viewport)。如果以上方法都不起作用，没有最小、完整和可验证的示例，我无法帮助您。在这里重现错误。 – Andrei Gheorghiu 2017 年 4 月 19 日 13:131

解决方案

-webkit-transform: translateZ(0);连同显式内联 display: block; (如果它在我的 .css 文件中似乎不起作用)为我解决了这个问题。感谢您的建议!抱歉，我没有提供更多代码作为示例，但帖子可能已经太长了。 Safari 有时感觉就像浏览器的一片丛林...... – Starcat 2017 年 4 月 20 日 0:03