Javascript 背景CSS剪辑路径问题

我目前正在实现一个开关。问题是开关应该隐藏的背景在左端显示一条细线。我完全不知道为什么。奇怪的是，在这里，一切看起来都很好。该开关与所有其他内容一起位于可滚动的主包装中。我认为这可能是问题所在，但在删除滚动后，错误仍然存在：

当我运行inspector并将元素悬停时，背景似乎消失了：

这是我的密码。我尝试了一个低，但找不到问题：

let toggle=document.getElementById（'container'）；
让toggleContainer=jQuery（“#toggleContainer”）；
让我们一起数一数；
jQuery（“#容器”）。单击（函数（）{
toggleNumber=！toggleNumber；
如果（toggleNumber）{
css（“剪辑路径”，“插入（0.50%）”；
}否则{
css（“剪辑路径”，“插入（0 50%0 0）”；
}
});
#容器{
宽度：100%；
高度：56px；
边缘底部：20px；
位置：相对位置；
溢出：隐藏；
用户选择：无；
光标：指针；
边界半径：3px；
-webkit盒阴影：0.2rem 0.4rem 0 rgba（0,0,0,2）；
盒子阴影：0.12雷姆0.4雷姆0 rgba（0,0,0,2）；
}
.内胆{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
文本转换：大写；
}
.内部容器：第一个子容器{
背景：灰色；
颜色：#ffffff；
}
.内部容器：第n个子容器（2）{
背景：黄绿色；
颜色：#ffffff；
剪辑路径：插入（0 50%0 0）；
-webkit转换：0.2s；
-o-转变：0.2s；
过渡：0.2s；
}
.切换{
宽度：50%；
位置：绝对位置；
身高：继承；
显示器：flex；
字号：600；
}
.切换p{
保证金：自动；
}
.切换：第n个子项（1）{
右：0；
}

私人的

公开的

私人的

公开的

这似乎就是您看到的：
这是通过制作CSS:
剪辑路径：inset（0 50%0 1px）完成的

也许可以尝试在左侧添加一些负空间：

toggleContainer.css（“剪辑路径”、“插入（050%0-10px）”）

我建议使用代码较少且不使用剪辑路径的优化版本
：


let toggle=document.getElementById（'container'）；
让toggleContainer=jQuery（'.inner container'）；
jQuery（“#容器”）。单击（函数（）{
toggleContainer.toggleClass（'second'）；
});
#容器{
边缘底部：20px；
用户选择：无；
光标：指针；
边界半径：3px；
盒子阴影：0.12雷姆0.4雷姆0 rgba（0,0,0,2）；
}
.内胆{
高度：56px；
文本转换：大写；
显示器：flex；
背景：
线性渐变（黄褐色，黄褐色）左/50%100%无重复，
灰色
颜色：#ffffff；
过渡：0.2s；
}
.内胆{
背景位置：右；
}
.切换{
宽度：50%；
显示器：flex；
字号：600；
}
.切换p{
保证金：自动；
}

私人的

公开的

该代码段在Windows 10上的Chrome 77或Firefox 69中没有问题。你在哪个浏览器中看到它？@Rorymcrossan I'n Chrome 77。我现在真的很困惑。什么浏览器和版本？在FF上，它工作得很好。检查兼容性@Justinas最新的chrome。奇怪的是，在给定的示例中，这个开关看起来不错，但在页面中却没有……这就是我在Chrome中看到的您的代码片段：