CSS3 transition breaks in chrome on refresh - html

Question

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 1

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">Contact</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.