Html 使用chrome的某些iOS设备上的CSS盒阴影工件

我试图在这里或其他地方寻找答案，但似乎找不到。这个问题前后矛盾，我不知道该怎么办。它似乎只出现在使用chrome的iOS设备上，而不出现在safari、基于android的chrome和不同版本的firefox上

我正在VueJS中构建我的web公文包，因此所有前缀都由webpack固定。我的按钮（SCSS）有以下代码：

最后提到的两个类

.hide component btn shadow left

和

.hide component btn shadow right

，是根据一个变量应用的阴影，该变量确定用户是用左手还是右手使用应用程序/网页。用户可以单击/轻触带有箭头的按钮来更改主导航按钮的位置，从而更改大而薄的按钮（您可以在屏幕截图上看到），使其更易于与较大的屏幕一起使用

下图显示了正确的预期行为。您可以看到屏幕的左侧有我前面提到的高而薄的按钮（用于隐藏组件）。屏幕截图显示左侧有一个按钮。但是如果用户是右撇子，它也可能出现在右侧，在这种情况下，高按钮将出现在右侧，内容将出现在左侧，如下所示

左侧用例：

右侧用例：

前面的屏幕截图显示了它在大多数浏览器上的外观和分辨率（预期行为）

以下屏幕显示工件出现的时间，换句话说，是意外行为（注意按钮右侧的行）：

这是一个使用chrome的iOS（iPhone 7）设备的屏幕截图，显示了相同的行为（箭头显示了存在的工件，沿着按钮的右边缘，与前面的屏幕截图相同）：

我不明白到底是什么引起了这个问题，而且只针对iOS和chrome。我试着把背景颜色改成不同的颜色，变成透明的，什么都没有。实际移除工件的唯一方法是移除box shadow属性，我需要它。有什么建议吗？

---

您可以亲自查看。

我不确定是否完全理解您的问题。但是对于

box shadow

您应该始终使用

-webkit box shadow/*Safari 3-4、iOS 4.0.2-4.2、Android 2.3+*/

和

-moz box shadow/*Firefox 3.5-3.6*/

，希望它对您有用。@SMAKSS webkit由webpack自动应用，但谢谢您的评论。我会试着编辑并使它更具体。我不确定我是否完全理解你的问题。但是对于

box shadow

您应该始终使用

-webkit box shadow/*Safari 3-4、iOS 4.0.2-4.2、Android 2.3+*/

和

-moz box shadow/*Firefox 3.5-3.6*/

，希望它对您有用。@SMAKSS webkit由webpack自动应用，但谢谢您的评论。我将尝试编辑并使其更具体。

.hide-component-btn{
        width: 100%;
        height: 100%;
        background-color: rgb(240, 248, 248);
        border: none;
        color: $default-text-color;
        padding: 0;
        cursor: pointer;
        transition: background-color ease-in-out 0.2s;
        &:hover, &:active{
            color:white;
            background-color: $component-secondary-color;
            i{
                color:white;
            }
        }   
    }
    .hide-component-btn-shadow-left{
        box-shadow: inset 13px 13px 0px -5px $component-secondary-color;
    }
    .hide-component-btn-shadow-right{
        box-shadow: inset -13px 13px 0px -5px $component-secondary-color;
    }