CODEWITHSUNDEEP
csscross-browsercss-transitionsbox-shadow
aMJay
aMJay

Reputation: 2233

Inconsistent behaviour of box-shadow with transition

I have a button which will get a box-shadow on hover. It also has a transition. My problem is, it doesn't always display the same result, sometimes the box-shadow will be offset by a few px and not be equal on all sides as shown on the image:

enter image description here

Below is my code and here is JSFiddle demo. 

div{
  width:100px;
  height:25px;
  transition:.2s;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}
<div></div>

As you can see if you remove the transition the box-shadow is deisplayed properly.

div{
  width:100px;
  height:25px;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}
<div></div>

What is even more interesting to me is that JSFiddle demo, would display different outputs after deleting and pasting back some code while keeping it without changes overally, or by running the same code again, or reducing the transition time. It's hard for me to explain how to reproduce this but you might see it yourself if you play with a bit. My question is how to keep it consistent, and most importantly how to keep the box-shadow equal while keeping the transition.

@edit

Video of issue

Also I've made a video of how I see the differences since some people reported not to see any problem. Is it at all possible it's somehow fault of my screen? (Hopefully the issue is visible on the video or maybe I'm just going crazy)

@edit2

It seems like it is a browser issue. Originally I encountered the issue on latest Chrome version, couldn't reporoduce the problem on latest Firefox. After discovering that thanks to comments I've added webkit prefixes to transition and box-shadow but it didn't solve the problem.

Upvotes: 0

Views: 132

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

As you said, it seems to be a bug but to overcome this you can do it differently using a pseudo element where you apply the box-shadow but you animate another property (scale, opacity, width/height, etc)

div.box{
  width:100px;
  height:25px;
  margin:10px;
  background:lightgrey;
  border-radius:25px;
  position:relative;
}
div.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-shadow:0 0 10px green;
  border-radius:inherit;
  transition:.2s;
  transform:scale(0.8);
}

div.box:hover::before{
  transform:scale(1);
}
<div class="box"></div>

Upvotes: 1

Related Questions