Pseudo elements transition on IE 11 ignores padding

Question

Trying to do a button hover effect I stumbled upon this weird bug on IE.

It's happening even on IE11.

When you hover over the button the pseudo elements 'jump' their transition. If you remove the padding, it stops!

I've been trying to work around it the whole afternoon, but I can't seem to find the problem.

Here's the demo: http://codepen.io/anon/pen/rVwRKL

HTML
<a href="http://##" title="yeah">Live Button</a>

CSS
body
{
  padding: 5em;
  margin: 0;
}

a{
  padding: 1em 1em;
  margin: 0;
  box-shadow: inset 0px 0px 0px 3px blue;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
}

a::before,
a::after
{
  transition: width 0.4s ease, height 0.4s ease 0.4s, opacity 0.4s ease;
  content: " ";
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border: solid 3px green;
  display: inline-block;
}

a::after
{
  right: 0;
  bottom: 0;
  border-right-color: transparent;
  border-top-color: transparent;
}

a::before
{
  left: 0;
  top: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0;
  height: 0;
  opacity: 0;
}

Thanks!

Answer 1

Not sure if you ever got an answer to this Marlon but I've just come across basically the same issue with IE. Thankful I've managed to figure out the oddity in IE that is causing the issue.

It appears to be when you are mixing your measurement prefixes i.e. px, %, em, vw, etc...

In my issue I was going from a vw to px - this worked fine everywhere except IE. As soon as I changed my vw to a px everything worked fine.

In your example above it was even less obvious to spot. You have the before/after set to a width of 100% - % being the measurement. Then, in the hover state, you had them both simply set to 0 (zero) with no measurement. This is where the problem is because no measurement isn't the same as % which IE appears to struggle to figure out (?!?!?!). As soon as you add the % to the width/height on the hover state it works fine.

See working example here with the adjusted width/height: http://codepen.io/anon/pen/YyNWzw

Previous CSS

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0;
  height: 0;
  opacity: 0;
}

Adjusted CSS

a:hover::before,
a:hover::after
{
  transition-delay: 0.4s, 0s, 0.7s;
  width: 0%;
  height: 0%;
  opacity: 0;
}

Typically I would also never bother adding a measurement when the value is 0 (zero) but I guess if you're using transitions then IE requires it to match.

Hope this helps.