仅当内容不为空时才会显示Safari 13+框阴影

问题描述

当Box-shadow属性为空（“”）并在Safari中查看时，content属性没有显示。我可以使用Safari 13.1.3复制它，并获得iOS 14用户的报告。

这是CSS（它是Foundation 5响应式汉堡菜单图标）。

.top-bar .toggle-topbar.menu-icon a span:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    margin-top: -8px;
    top: 50%;
    right: 21.666px;
    right: 1.3541666667rem;
    Box-shadow: 0 0 0 1px #fff,0 7px 0 1px #fff,0 14px 0 1px #fff;
    width: 16px;
}

一旦我在content属性中输入内容，就会显示框阴影。因此，我当然可以在内容中添加一个点，并用color: transparent使其消失。

真的有解决方案吗？它可以在当前的Chrome和Firefox中使用。

解决方法

这里有一个对我有用的修复。

对于我们使用 Foundation 5 的某些项目，该错误似乎在 MacOS (~10.15) 和 iOS (~14.3) 上的 Chrome/Safari 中表现出来。

增加一些高度似乎对我们的项目有用

.tab-bar .menu-icon span {
   height: 2px;
   box-shadow: 0 10px 0 0px #fff,0 16px 0 0px  #fff,0 22px 0 0px #fff;  
}

您可以在此 Codepen 中查看比较。蓝行是标准基础，红行是修复。