Css Safari 13&x2B；框阴影仅在内容不为空时显示

当

content

属性为空（“”）并在Safari中查看时，

box shadow

属性没有显示，我遇到了一个问题。我可以用Safari 13.1.3复制它，并在iOS 14上收到用户的报告

这里是CSS（它是基础5响应汉堡菜单图标）。< /P> 只要我在

content

属性中输入一些内容，框阴影就会显示出来。因此，我当然可以在内容中添加一个点，并使用

颜色：透明
使其消失

有真正的解决办法吗？它在当前的Chrome和Firefox中工作。
这里有一个对我有效的修复程序

 bug似乎在MalOS（~ 10.15）和iOS（～14.3）的Chrome／Safari中表现出来，对于我们使用基金会5的一些项目，
增加一些高度似乎对我们的项目有用

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

你可以在这里查看一个比较。蓝色行是标准基础，红色行有固定。
 这是一个对我起作用的修正。

 bug似乎在MalOS（~ 10.15）和iOS（～14.3）的Chrome／Safari中表现出来，对于我们使用基金会5的一些项目，
增加一些高度似乎对我们的项目有用

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

你可以在这里查看一个比较。蓝行是标准基础，红行有固定。
可能是高度：0是杀死你的Box阴影？为什么它在Chrome和Firefox中工作？它可以工作，但当我添加一个
高度：1px
时，汉堡图标的第一个栏有不同的颜色。@Lazar Nikoic我尝试过：向CSS添加高度会使框阴影向上缩放。因此，这只是另一个破解，而不是我正在寻找的解决方案。为什么不在元素上放置框阴影，而不是：after选择器？@k123没有元素。我花了一些时间才理解图标是如何工作的，但是
span
是空的，
：after
正在生成图标。盒子阴影是图标。可能高度：0正在杀死你的盒子阴影？为什么它在Chrome和Firefox中工作？它可以工作，但当我添加一个
高度：1px
时，汉堡图标的第一个栏有不同的颜色。@Lazar Nikoic我尝试过：向CSS添加高度会使框阴影向上缩放。因此，这只是另一个破解，而不是我正在寻找的解决方案。为什么不在元素上放置框阴影，而不是：after选择器？@k123没有元素。我花了一些时间才理解图标是如何工作的，但是
span
是空的，
：after
正在生成图标。长方体阴影就是图标。