homepage Welcome to WebmasterWorld Guest from 54.204.231.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
High resolution sprites and Firefox
Shows bottom 1px of vertical sprite during hover state
coopster




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

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




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

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




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

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




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

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

Fotiman




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

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




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

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:
https://bugzilla.mozilla.org/show_bug.cgi?id=856793
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 ...
https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions
... 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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved