CSS hover transition cross-browser compatibility

Question

I have a simple language select page with pure CSS animated transitions. I've made a jsFiddle here.

How it's supposed to behave is as follows:

1. User mouses over one of two (or more) language selectors.
2. That language selector transitions upward and comes to full opacity. The relevant language text (e.g., English, Español) appears as well.
3. The user either clicks on the link or mouses out, in which case the transition reverses.

In Chrome, it behaves as expected.

In Firefox, when I mouse over one image, both move up.

In Opera, it behaves mostly as expected, but the text jumps back down after moving up.

I'm trying to understand why this would happen in these browsers, and how I can fix it, if possible.

In the case that jsFiddle is down, the relevant code is:

HTML

<div id="container"><div id="cell">
    <div class="langcell"><a href="en/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
    </div>
    <div class="langcell"><a href="es/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Espa&ntilde;ol</p></a>
    </div>
</div></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#container {
    width: 100%;
    height: 100%;
    display: table;
}
#cell {
    display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
    display: inline-block;
    margin: auto 1em;
}
a {
    position: relative;
    top: 0;
    -webkit-transition: top 0.25s;
    -moz-transition: top 0.25s;
    -o-transition: top 0.25s;
    transition: top 0.25s;
    color: black;
    text-decoration: none;
}
a:hover {
    top: -16pt;
}
a p {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: 0.05em;
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover p {
    opacity: 1;
}
a img {
    opacity: 0.65;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover img {
    opacity: 1;
}

Answer 1

CSS3 is pretty new. And many of the features are still not compatible in many browsers. Compatibility Chart

So it is kind of off-putting if your clients have a bit older browsers (even if they have a year old version), in which case CSS3 transition wont work.

Your safest bet to make the transition is to do it using javascript or some javascript library such as jQuery

Answer 2

I got weird problems on firefox(v12) as well, where it was moving both elements up on hover. Later versions (19v), it seemed resolved.

I think there was something going on with your selectors and how mozilla interprets things versus webkit. See if this jsfiddle works for you.

All I really did was change a lot of the selectors of a to .langcell and it seem to work. I had to re-adjust a bit of css to achieve the same style, like the nested .langcell a selector. I have a suspicion that it may be due to a being inline by default while p is block and img is inline-block.

I won't lie and say I understand fully why that was happening to begin with, but just in general, giving styles to classes over elements is not just a preference, it is more efficient at render time as well.

CSS Selector Performance

Code:

    .langcell {
        display: inline-block;
        margin: auto 1em;
        position: relative;
        top: 0;
        -webkit-transition: top 0.25s;
        -moz-transition: top 0.25s;
        -o-transition: top 0.25s;
        transition: top 0.25s;
    }

    .langcell a { 
        color: black;
        text-decoration: none;
    }
    .langcell:hover {
        top: -16pt;
    }
    .langcell p {
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        font-family: Verdana, Geneva, sans-serif;
        letter-spacing: 0.05em;
        opacity: 0;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    .langcell:hover p {
        opacity: 1;
    }
    .langcell img {
        opacity: 0.65;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    langcell:hover img {
       opacity: 1;
    }