Chrome mobile sometimes renders element incorrectly - css

Question

I'm writing a "responsive design" layout and it's been kind of a headache so far. I decided to use the :before and vertical-align: middle; workaround to vertically align some text inside 'buttons', and it works on everything, except one button! The thing is, on refresh, Chrome Mobile will sometimes render it correctly, and sometimes it won't; it seems arbitrary, I haven't been able to find a pattern.
Here's how it should not look:
Here's how it should look:
Here's the relevant markup:
<div class="button">
<a href="/login">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-sign-in"></i>
</span><br/>
<span class="button-label">
Log In
</span>
</span>
</a>
</div>
<div class="button">
<a href="/signup">
<span class='button-container'>
<span class="button-icon">
<i class="fa fa-user-plus"></i>
</span><br/>
<span class="button-label">
Join Us!
</span>
</span>
</a>
</div>
And the CSS:
.button
{
display: inline-block;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.button a
{
display: inline-block;
height: 100%;
}
.button a:before //So its contents vertically-align
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.button-container
{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.button-icon
{
font-size: 180%;
}
.button-label
{
font-size: 90%;
}
It only happens with the "Log In" button (but I included two of them in case it helps). The buttons are contained within a div that has text-align: right;, in case that's relevant.
It renders well on Firefox Mobile, and on desktop, of course. I tested it on Chrome Beta v42, and the most recent version of regular Chrome Mobile, I guess maybe it's a Webkit thing, but I wonder if it's a known issue, and if there are any workarounds, or at least an explanation as to why it happens.