Scironic Scironic - 5 months ago 25
CSS Question

CSS3 transition breaks in chrome on refresh

Looked around and haven't found anything similar - finding this really weird.

I have a simple animation on load for a menu at the bottom of a page, sliding the text up a couple seconds after loading (to allow other animations to finish). This works absolutely fine on firefox, IE, android browser and chrome for android. But when I test it on desktop Chrome (44), it doesn't quite work.

What happens is when I load the page for the first time (cleared cache/incognito) the animation will work. But every subsequent time I load the page, it will break - and I have no idea why.

This only happens when I wrap one of the spans in the div inside a link.

The animation is as so:

@-webkit-keyframes fadeInBottom {
0% {
opacity: 0;
-webkit-transform: translateY(15vw);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInBottom {
0% {
opacity: 0;
-moz-transform: translateY(15vw);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}

@keyframes fadeInBottom {
0% {
opacity: 0;
transform: translateY(15vw);
}
100% {
opacity: 1;
transform: translateY(0);
}
}


the css for the spans:

.basePanel{
z-index:999;
height: 5vw;
width: 100vw;
position:absolute;
bottom:0;
font-size:4vw;
color:#f1f8f0;
display:inline-block;
font-family:coda, courier;
-webkit-animation-name: fadeInBottom;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1.3s;
-webkit-animation-delay:1.8s;
-moz-animation-name: fadeInBottom;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1.3s;
-moz-animation-delay:1.8s;
animation-name: fadeInBottom;
animation-fill-mode: both;
animation-duration: 1.3s;
animation-delay:1.8s;

}
#contact{
padding-top: 15vh;
position:relative;
font-family:coda, courier;
text-align:left;
color:#f1f8f0;
font-size:6vw;
}
.button{
position:relative;
text-align:center;
width:32.1vw;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-ms-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}

.button:hover{
background-color: #252c24;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
-ms-transition: background-color 0.5s linear;
transition: background-color 0.5s linear;
}

.centre{
width:32.15vw;
}


and relevant html:

<div class="basePanel">
<span class="left basePanel button">About</span>
<span class="centre basePanel button">Portfolio</span>
<a href="contact">
<span class="right basePanel button">Contact</span>
</a>
</div>


Here is a fiddle with the relevant HTML and CSS: https://jsfiddle.net/bqLLqbwc/

Annoyingly, this actually works in Chrome. To see the broken page, here is the actual web page I am working on: http://www.devox.org

I've tested on two computers, one running windows 7 and the other running ubuntu 14.04, both running chrome 44.

Answer

So I ended up restructuring the html a bit.

While it feels like wrapping a <div> tag in an <a> tag would be easier, it just doesn't seem to work in Chrome. Maybe it breaks some legacy bug from pre HTML5 days. I have no idea.

So instead I wrap an <a> tag in a <span> tag and change the css to make it fill the div and remove any decoration:

html:

<span class="right basePanel button"><a href="contact">Contact</a></span>

css:

.button a{
    color: #f1f8f0;
    display:block;
    height: 100%;
    width: 100%;
    text-decoration:none;
}

.button a:visited{color:#f1f8f0;}

Which seems to work fine.

Comments