盒子阴影动画的奇怪行为

Question

我的盒子阴影出现了这种奇怪的行为，并且不知道它来自哪里。

有人知道如何防止这种情况发生吗？ （末段视频） 代码如下：

.w-logos.style_1 .w-logos-item {
    border: 0px;
    opacity: 1;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 35px;
    margin-bottom:35px;
    margin-left:30px;
    filter: grayscale(100%) contrast(200%);
    box-shadow: 0 0 0 0.01px;
    transition: all 0.5s; }


.no-touch .w-logos.style_1 .w-logos-item:hover {
    opacity: 1;
    filter: grayscale(0%) contrast(100%);
   padding-top: 0px;
   padding-bottom: 0px;
   box-shadow: 0 0 60px -40px;
}

Link to the video on Youtube.com

如果您想查看真实的网页：http://neu.wu-marketingclub.at（位于主页底部）

在此先感谢您的帮助！ ：）

Answer 1

此CSS样式在Firefox浏览器中还有另一个问题：

从box-shadow: 0 0 0 0.01px;删除此行.w-logos.style_1 .w-logos-item { 并将transition: all 0.5s linear;添加到:hover

对于我来说，无论是在Firefox中还是在Chrome中，此更改都可以正常工作。

  

更新：它应该解决Safari悬停问题：

    .no-touch .w-logos.style_1 .w-logos-item:hover {
 opacity: 1;
 filter: grayscale(0%) contrast(100%);
 padding-top: 0px;
 padding-bottom: 0px;
-webkit-appearance: none;
-webkit-box-shadow: 0 0 60px -40px #333;
 box-shadow:0 0 60px -40px #333;
    }