High resolution sprites and Firefox - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

High resolution sprites and Firefox

Shows bottom 1px of vertical sprite during hover state

coopster

8:26 pm on Apr 1, 2013 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Other browsers seem to be handling this just fine but Firefox is showing the bottom (looks like 1 pixel) of the top image in a vertical sprite stack during hover state when only the bottom image in the sprite stack should be showing. When I use a normal resolution sprite it works just fine but the high resolution sprite is showing a fine line at the top of the submit button during hover state.

Details on the sprite:
Overall dimensions: 192px x 108px
Top image is green in color and is 54px high
Bottom image is grey in color and is 54px high
By setting the background-size, width and height attributes to 50% we get a nice, crisp high-res image that looks great in all viewports, including mobile.

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>Testing High Resolution Sprites</title> 
  <style type="text/css"> 
    button::-moz-focus-inner, input::-moz-focus-inner { 
      border:0 none; 
      padding:0; 
      } 
    input.sprite { 
      background-color:transparent; 
      background-image:url(/path/to/high-res/sprite); 
      background-position:0 0; 
      background-repeat:no-repeat; 
      background-size:96px auto; 
      width:96px; 
      height:27px; 
      border:0 none; 
      cursor:pointer; 
      } 
    input.sprite:hover { 
      background-position:0 -27px; 
      } 
  </style> 
</head> 
<body> 
  <form accept-charset="utf-8" method="post" action=""> 
    <p><input name="sprite" type="submit" value="" alt="Submit Button" class="sprite"> (high resolution)</p> 
  </form> 
  </body> 
</html>

I've tried every fix in the book but cannot overcome the issue. I'm hoping the community can offer some guidance!

Fotiman

12:03 am on Apr 2, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Gave your example a try, captured a print screen of the hover, pasted it into a graphic program, and zoomed in. The color shown is not the exact color in the top part of the image, rather it looks there are actually 3 pixels affected. The top pixel looks like the top image color, while the next 2 are shades of the bottom color... it looks like Firefox is doing something like some kind of anti aliasing or something. I also tried making the background-position: 0 -25 and it's more obvious.

I suspect it has to do with the background-size, and some scaling that it's doing. But I'm not sure of the fix.

lucy24

12:33 am on Apr 2, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Huh. My initial hunch was something entirely different: Somewhere within the code there is something that Firefox is interpreting as a 1-pixel-wide border, causing everything to shift by one px as the border kicks in.

:: vague nagging recollection of post --probably here, maybe next door in HTML-- involving overflow calculated to the last pixel, with similar 1px difference in interpretation between browsers ::

phranque

6:19 am on Apr 2, 2013 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

have you tried firebug in layout mode to see if that reveals any clues?

Fotiman

12:57 pm on Apr 2, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I figured it out! :)

Investigating more closely, I noticed that if I just viewed the image in Firefox (that is, I pointed my browser directly at the PNG file), I could see that where the top and bottoms touched, the pixels were blurred. That suggested to me that there was something strange about the way Firefox was rendering images. A Google search lead me to this image-rendering [developer.mozilla.org] page. I added this to the styles and it worked:


image-rendering: crisp-edges;

Note, this is marked as an experimental technology, so you may want to use the vender prefixed versions as described on that page.

coopster

9:06 pm on Apr 2, 2013 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Close call, Fotiman! One of the developers even thought perhaps rendering was the issue but I tried that property as well and although the top pixel gets removed the image becomes pixelated and contorted. According to another developer the experimental property was not the issue in this case. I filed a bug report after messing with this most of yesterday afternoon which has the full html including image if you want to see exactly what is happening:
[bugzilla.mozilla.org...]
Add the image-rendering property and see what happens. Icky.

@phranque, yes I was debugging with every tool imaginable. Ctrl + (six times!) to zoom in and after the sixth zoom the pixel goes away. Or add the experimental property image-rendering and the pixel line goes away but the image becomes contorted as I mentioned.

@lucy24, yes that nagging recollection you feel is talked about quite often but usually resolved using the -moz-* specific solution in the <style> shown in the code, which is a solution provided in the normalize.css project. Other attempts included playing with line-height, margin, padding, border, ... the list goes on. I even went through the -moz-specific and -moz experimental options ...
[developer.mozilla.org...]
... trying all kinds of things before succumbing to a workaround -- adding one pixel transparent space above and below each image in the sprite. Yep, that's the fix ... for now. No more pixel line and a crisp image with no contortion. Oh well, it works. Oh yeah, had to modify the style to accommodate too:

input.sprite {  
   background-color:transparent;  
   background-image:url(/path/to/high-res/sprite);  
   background-position:0 -1px;  
   background-repeat:no-repeat;  
   background-size:96px auto;  
   width:96px;  
   height:27px;  
   border:0 none;  
   cursor:pointer;  
   }  
  input.sprite:hover {  
   background-position:0 -30px;  
   }