Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

sprite_images breaks image in IE9 when zoomed in #514

Open
GoogleCodeExporter opened this issue Apr 6, 2015 · 12 comments
Open

sprite_images breaks image in IE9 when zoomed in #514

GoogleCodeExporter opened this issue Apr 6, 2015 · 12 comments

Comments

@GoogleCodeExporter
Copy link

I have a website under development which uses an image for the bottom of 
tables, with a rounded overlay image at each end.

On IE9 if I enable mod_pagespeed (latest version), there is a distinct border 
around image (see the attached image).

The bottom of the box is drawn with the HTML:
<div class="featureBoxBottom"><div 
class="featureBoxBottomLeft">&nbsp;</div><div 
class="featureBoxBottomRight">&nbsp;</div></div>

The CSS is then:

.featureBoxWrap {
    padding: 0 0 0 12px;
    max-height:224px;
    overflow:hidden;
 }
.featureBoxBkgrnd {background: #5799C7;}
.featureBoxBottom {height: 12px; margin-bottom: 10px; overflow: hidden;}
.featureBoxBottomLeft {float: left; width: 12px; height: 12px; background: 
url(../img/ip_featuredbox_bottom_left.gif) left bottom no-repeat;}
.featureBoxBottomRight {float: right; width: 12px; height: 12px; background: 
url(../img/ip_featuredbox_bottom_right.gif) right bottom no-repeat;}

Any ideas are welcome


Original issue reported on code.google.com by rwap.services on 9 Oct 2012 at 12:48

Attachments:

@GoogleCodeExporter
Copy link
Author

Looking into this.

Original comment by sligocki@google.com on 9 Oct 2012 at 4:48

@GoogleCodeExporter
Copy link
Author

Can you provide a URL for your site? That will be crucial to debugging this 
issue.

Original comment by sligocki@google.com on 9 Oct 2012 at 5:05

  • Changed state: RequestClarification

@GoogleCodeExporter
Copy link
Author

You can use: http://46.23.70.201/category/All+categories


Original comment by rwap.services on 9 Oct 2012 at 5:23

@GoogleCodeExporter
Copy link
Author

We aren't able to reproduce this problem with IE9. It doesn't look like WebPage 
Test can either: http://www.webpagetest.org/result/121009_8F_HER/ (although the 
image is a bit blurry).

Do you have to do anything special to see this bug? Do you have any plugins in 
IE?

Original comment by sligocki@google.com on 9 Oct 2012 at 7:21

@GoogleCodeExporter
Copy link
Author

Nothing in particular, except zooming into the page it appears....

Original comment by rwap.services on 9 Oct 2012 at 7:43

@GoogleCodeExporter
Copy link
Author

Just to clarify - this does NOT appear if mod_pagespeed is disabled for the 
page - but does show on zomming in / out of the page with CTRL + / - (and only 
in IE 9 - not in Firefox)

Original comment by rwap.services on 10 Oct 2012 at 11:58

@GoogleCodeExporter
Copy link
Author

I can see this on IE9 via Ctrl-+.  With one Ctrl-+ I see it faintly, with two I 
see the exact view in the screenshot above.

It does not repro in FF, but using FF/Firebug, and inspecting that corner, I 
can see that box in the corner exists in the DOM as a div with class 
featureBoxBottomLeft.

According to Firebug that is:

.featureBoxBottomLeft {
    background: url("http://46.23.70.201/themes/icephorm/img/ip_leftcol_auctionbox.png+ip_featuredbox_bottom_left.gif+ip_featuredbox_bottom_right.gif.pagespeed.is.j3pq_Ripuw.png") no-repeat scroll 0 -573px transparent;
    float: left;
    height: 12px;
    width: 12px;
}

So this appears to be related to spriting.  There might be something about our 
Spriting implementation that does not work perfectly on IE9.  Note also that we 
sprited the GIFs but transcoded them to PNG.  But my suspicion is that this is 
spriting-related.

For some reason, when I try to see the IE9 behavior with ?ModPagespeed=off the 
page gets completely unstyled.  ?ModPagespeed=off works fine in FF.

Original comment by jmara...@google.com on 12 Oct 2012 at 1:11

@GoogleCodeExporter
Copy link
Author

As a workaround, can you try turning off spriting?

Original comment by jmara...@google.com on 12 Oct 2012 at 1:12

@GoogleCodeExporter
Copy link
Author

I have added 
ModPagespeedDisableFilters recompress_images

to my pagespeed.conf and the problem appears to have gone away (I presume that 
is the filter you mean by spriting?)

Original comment by rwap.services on 12 Oct 2012 at 1:22

@GoogleCodeExporter
Copy link
Author

Could you try:

ModPagespeedDisableFilters sprite_images

instead? That will be less invasive and allow you to continue to rewrite other 
images on your site.

Original comment by sligocki@google.com on 12 Oct 2012 at 2:21

  • Changed state: Accepted

@GoogleCodeExporter
Copy link
Author

Have tried this and yes, this also resolves the issue

Original comment by rwap.services on 12 Oct 2012 at 2:53

@GoogleCodeExporter
Copy link
Author

Old Summary: Background-image overlay has outline box in IE

Original comment by sligocki@google.com on 12 Oct 2012 at 3:22

  • Changed title: sprite_images breaks image in IE9 when zoomed in

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant