Q:

strange behavior of box-shadow animation

I got this strange behavior with my box-shadows and do not know where it is coming from. 
Does anybody know how to prevent this from happening? (Video at the end) 
Code is the following:
.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
in case you want to check the real webpage: http://neu.wu-marketingclub.at (it's at the bottom of the main page)
thanks in advance for any help! :) 

A:

This css style has another problem in Firefox browser :

remove this line box-shadow: 0 0 0 0.01px; from .w-logos.style_1 .w-logos-item {
and add transition: all 0.5s linear; to :hover
for me in both firefox and chrome it works fine with this change.

Update: it should solve safari hover problem:

    .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;
    }

