Menu
I have a responsive image which transitions on hover. When the image is at 100% width, the hover transition works fine. However, in FF21, when you shrink the browser window down to a size where the image starts shrinking, and then hover over the image, at some sizes there is a small but perceptible shift upwards (of the background image). It is a very small shift, and it doesn't occur at every width (strangely).
Screenshot with the two states below (light area without, and dark area with hover). The bug is most clearly seen at the 'x'. The effect only occurs at certain widths (not all) and is very small. But still, it is clearly there.
I've tried IE and Chrome as well, and they don't show this behavior. So it seems to be FF specific. It looks like it's resizing the image to be 1px less high. Does anyone know why that is, and how to fix it? (jfiddle link below so you can see for yourself)
http://jsfiddle.net/t3Djd/1/
HTML
<body>
<figure>
<h2><a href="#">Title</a></h2>
<a href="#"><img src="http://placehold.it/500x450" /></a>
</figure>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
font-size: 100%;
}
/*========================================
============== CENTER IMAGES =============
========================================*/
body {
text-align: center;
}
/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/
figure, figure > a, img {
max-width: 100%;
}
/*========================================
============ GENERAL STYLING =============
========================================*/
figure h2 {
text-align: center;
font-style: italic;
font-size: 1.75rem; /* 16 x 1.75 = 28px */
font-weight: normal;
}
figure h2 a {
text-decoration: none;
color: black;
}
/*========================================
============ HOVER TRANSITION ============
========================================*/
figure {
padding: 1rem 1rem 2rem;
position: relative;
display: inline-block;
}
figure h2 {
margin: -1rem 0 0 -1rem; /* offset the figure padding */
z-index: 2;
position: absolute;
line-height: 0;
width: 100%;
top: 50%;
}
figure h2 a {
z-index: 1;
color: rgba(255,255,255,0);
-webkit-transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
figure:hover h2 a {
color: rgba(255,255,255,1);
}
figure > a {
display: inline-block;
line-height: 0;
background: black;
box-shadow: 0 2px 5px black;
}
img {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
figure:hover img {
opacity: 0.5;
}
This is a known bug using firefox, the issue has already been brought up here
And here is the link to the Firefox Bug Report
Apparent fix:
applying box-shadow: #000 0em 0em 0em; to the css img tag
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
