CODEWITHSUNDEEP
htmlcsscss-animations
kvanbere
kvanbere

Reputation: 3352

IE causes css width animation to be reversed

Relevant parts:

#inline-navigation ul {
    display: table;
    text-transform: uppercase;
    text-align: center;
    list-style-type: none;
    margin: 0 auto;
    padding: 24px 0px;
}

#inline-navigation ul li {
    display: table-cell;
}

#inline-navigation ul li a {
    text-decoration: none;
    color: #777;
    padding: 0 4px;
    font-family: Monaco, Consolas, "Lucida Console", monospace;
    font-size: 15px;
    transition: 0.3s;
    height: 20px;
    line-height: 20px;
    margin: 0 4px;
    position: relative;
}

#inline-navigation ul li a:after,
#inline-navigation ul li a:before {
    content: '';
    border-bottom: 1px solid #ff6600;
    box-shadow: 0 2px 2px -2px #777;
    display: block;
    position: absolute;
    transition: 0.1s;
    width: 0;
}

#inline-navigation ul li:nth-child(1) a:before,
#inline-navigation ul li:nth-child(2) a:before {
    right: 0;
    top: -4px;
}

#inline-navigation ul li:nth-child(1) a:after,
#inline-navigation ul li:nth-child(2) a:after {
    bottom: -4px;
    left: 0;
}

#inline-navigation ul li:nth-child(3) a:before,
#inline-navigation ul li:nth-child(4) a:before {
    left: 0;
    top: -4px;
}

#inline-navigation ul li:nth-child(3) a:after,
#inline-navigation ul li:nth-child(4) a:after {
    bottom: -4px;
    right: 0;
}

#inline-navigation ul li a:hover {
    color: #ff6600;
}

#inline-navigation ul li a:hover:before,
#inline-navigation ul li a:hover:after {
    width: 75%;
}

In Internet Explorer 11, the animation produces an extremely bizzare border flicker where the border on the :after and :before elements seems to escape the parent element(?). I think it's because the animation is played in reverse compared to other browsers.

Fiddle; http://jsfiddle.net/NfE87/

Works fine on Chrome and Firefox. Thoughts?

Upvotes: 2

Views: 86

Answers (1)

chiliNUT
chiliNUT

Reputation: 19573

<a> elements are inline by default, and your style has them block in the :before and :after styles. It looks like IE is having an issue with switching the anchors between the default inline and the block style. Not sure exactly what that issue is, but...

If you make the anchors block in the stylesheet, the "switching" doesn't happen and it resolves the issue, so just add

a{display:block;} to the bottom of the stylesheet. Keep in mind that changing anchors to block elements may affect the layout, so adjust accordingly.

Upvotes: 1

Related Questions