See this demo: http://codepen.io/vobpler/pen/GHDCs
It's pretty simple, a button with two elements inside. There's a .text element which holds the text shown in the default state, then there's a .spinner element which holds the content that slides down when you click the button.
<button class="button load-btn">
<span class="text">Press me!</span>
<span class="spinner"><i class="icon">:D</i></span>
</button>
It works fine in Chrome, and pretty good in Firefox as well, but in Opera Presto (the old version 12 to be specific) both child elements (.text and .spinner) sticks out of the container. I do have overflow: hidden; applied, so it should be cut off (like it does in Chrome/FF).
After playing around with it a bit i noticed that it works if i change the display property to block or apply a float. That'll work, but i would prefer to keep it as inline-block if possible. Are there any other workarounds for this bug?
Screenshots in Opera:
http://i.imgur.com/MtwZQMU.png // Before click
http://i.imgur.com/RfODQ64.png // After click