Please help fix a bizarre IE image bug!
August 3, 2006 10:45 AM Subscribe
I'm a web app developer with a really strange Internet Explorer image bug. Please help! Specifics and screenshot within...
I'm on a team of developers working on a J2EE web application, running on OC4j (not by choice). We have a sizable number of icons in our application, which are all 16 x 16 pixel GIFs.
Every so often, only when using IE (v6 or v7 beta), the icons on a page will show up distorted. Instead of 16 x 16, they'll be stretched wider and taller, and, consequently, they look lousy. Refresh the page, and they'll immediately look fine. This has happened to multiple testers on different computers, with different screen resolutions and slightly different IE option settings. It has never happened in Firefox, despite much testing in that browser.
It is all the more annoying because it's not consistently reproducible, which makes it exceedingly hard to fix. We've made sure the height and width HTML attributes are always set on the images, and set them in the CSS for them as well (and verified that the CSS being applied to them is correct).
It should be noted that these images are sometimes being displayed using <img> tags, but most of the time are displayed using <input type="image"> because we use them as command buttons to submit forms, and are disallowed from using much Javascript.
A screenshot of an example:
Please help! I've been doing web app development for ten years, and I've never seen this behavior before.
I'm on a team of developers working on a J2EE web application, running on OC4j (not by choice). We have a sizable number of icons in our application, which are all 16 x 16 pixel GIFs.
Every so often, only when using IE (v6 or v7 beta), the icons on a page will show up distorted. Instead of 16 x 16, they'll be stretched wider and taller, and, consequently, they look lousy. Refresh the page, and they'll immediately look fine. This has happened to multiple testers on different computers, with different screen resolutions and slightly different IE option settings. It has never happened in Firefox, despite much testing in that browser.
It is all the more annoying because it's not consistently reproducible, which makes it exceedingly hard to fix. We've made sure the height and width HTML attributes are always set on the images, and set them in the CSS for them as well (and verified that the CSS being applied to them is correct).
It should be noted that these images are sometimes being displayed using <img> tags, but most of the time are displayed using <input type="image"> because we use them as command buttons to submit forms, and are disallowed from using much Javascript.
A screenshot of an example:
Please help! I've been doing web app development for ten years, and I've never seen this behavior before.
Do you have any CSS rules that are setting the width of
posted by staggernation at 11:29 AM on August 3, 2006
input elements? It looks suspiciously like the image is displaying at the same width as the Save and Reset buttons.posted by staggernation at 11:29 AM on August 3, 2006
Response by poster: Do you have any CSS rules that are setting the width of input elements?
Not a bad thought, but no. The buttons are set to a specific CSS class for all application buttons that sets their width, among other things. There is no width setting for all input elements. Besides, if there were, refreshing the page wouldn't make the images look right.
posted by cerebus19 at 11:50 AM on August 3, 2006
Not a bad thought, but no. The buttons are set to a specific CSS class for all application buttons that sets their width, among other things. There is no width setting for all input elements. Besides, if there were, refreshing the page wouldn't make the images look right.
posted by cerebus19 at 11:50 AM on August 3, 2006
Well, it's clearly a bug of some kind, but I still suspect the width of the buttons has something to do with it. Can you post the CSS definitions you're using for the buttons and for the icon images?
posted by staggernation at 11:58 AM on August 3, 2006
posted by staggernation at 11:58 AM on August 3, 2006
Best answer: Could it be a race condition between the image loading and the page being laid out? I'd try setting the server to wait a few seconds before sending the image to see if that reproduces the behaviour, and then give it a go with the image saved locally and referenced with file://, to see if it does it that way.
posted by reklaw at 12:17 PM on August 3, 2006
posted by reklaw at 12:17 PM on August 3, 2006
Just to be clear, when you "view source" on the aberrant instance of the page, everything (styles, direct dimension settings, etc.) is as it should be?
I'd consider reklaw's theory to be most likely; it's hard to understand why without seeing how the page is generated though.
posted by Brak at 12:50 PM on August 3, 2006
I'd consider reklaw's theory to be most likely; it's hard to understand why without seeing how the page is generated though.
posted by Brak at 12:50 PM on August 3, 2006
Response by poster: Yes, when I view the source, everything looks just as it should, and absolutely identical to what it looks like when the page renders correctly.
I'm sorry I can't go into too much detail about how the page is generated, since this is for a proprietary application for a client. Suffice it to say that we're using Struts, and that the JSP either contains an html:img tag or an html:image tag, depending of course on the icon's purpose.
staggernation: I agree that it is odd that the distorted image is the same width as the buttons. However, since the distortion is not confined to images rendered as image submit buttons, but also happens with "normal" images rendered using the img tag, I find that a little hard to believe. Plus, I've used the Web Developer Toolbar in Firefox to view the CSS being applied to the distorted graphics, and there's nothing there that shouldn't be. While it's possible IE is picking up something Firefox isn't, I would think my investigations into the CSS files would have found something, which they haven't.
I think reklaw's theory is very interesting, and had definitely not occurred to me. I'm not entirely sure how to tell the server to delay sending images, but I'll look into it.
posted by cerebus19 at 1:02 PM on August 3, 2006
I'm sorry I can't go into too much detail about how the page is generated, since this is for a proprietary application for a client. Suffice it to say that we're using Struts, and that the JSP either contains an html:img tag or an html:image tag, depending of course on the icon's purpose.
staggernation: I agree that it is odd that the distorted image is the same width as the buttons. However, since the distortion is not confined to images rendered as image submit buttons, but also happens with "normal" images rendered using the img tag, I find that a little hard to believe. Plus, I've used the Web Developer Toolbar in Firefox to view the CSS being applied to the distorted graphics, and there's nothing there that shouldn't be. While it's possible IE is picking up something Firefox isn't, I would think my investigations into the CSS files would have found something, which they haven't.
I think reklaw's theory is very interesting, and had definitely not occurred to me. I'm not entirely sure how to tell the server to delay sending images, but I'll look into it.
posted by cerebus19 at 1:02 PM on August 3, 2006
Perhaps you're running into a variation of the Peek-a-boo Bug? If so, perhaps try setting hasLayout on that element or its nearby parents (for which I'd recommend the tripswitch technique as that works in both IE6 & IE7).
posted by Handcoding at 2:39 PM on August 3, 2006
posted by Handcoding at 2:39 PM on August 3, 2006
Yeah, this might be a variant of the Flash Of Unstyled Content problem; google for that.
posted by baylink at 3:44 PM on August 3, 2006
posted by baylink at 3:44 PM on August 3, 2006
Could it be a race condition
Yes of some kind within the rendering process. Wrap each img in a p or place an empty span just before or whatever, and see if that magically fixes it (alters the timing of the process involved). A thought anyway.
posted by scheptech at 4:02 PM on August 3, 2006
Yes of some kind within the rendering process. Wrap each img in a p or place an empty span just before or whatever, and see if that magically fixes it (alters the timing of the process involved). A thought anyway.
posted by scheptech at 4:02 PM on August 3, 2006
Why not just define the width and height for the image and be done with it?
posted by ph00dz at 7:16 PM on August 3, 2006
posted by ph00dz at 7:16 PM on August 3, 2006
phoodz: "We've made sure the height and width HTML attributes are always set on the images, and set them in the CSS for them as well (and verified that the CSS being applied to them is correct)."
posted by flabdablet at 8:39 PM on August 3, 2006
posted by flabdablet at 8:39 PM on August 3, 2006
the distortion is not confined to images rendered as image submit buttons, but also happens with "normal" images rendered using the img tag
Are you sure about that? You say it's not consistenly reproducible--but can you get a screen shot where this is happening to an image that is 100% definitely using an img tag and not an input type="image" tag?
posted by staggernation at 9:17 PM on August 3, 2006
Are you sure about that? You say it's not consistenly reproducible--but can you get a screen shot where this is happening to an image that is 100% definitely using an img tag and not an input type="image" tag?
posted by staggernation at 9:17 PM on August 3, 2006
Response by poster: Thanks for your help, everyone. It wasn't a race condition, per se, but that was the hint that pushed me in the right direction. What was happening, it seems (I can't be 100% sure, because the bug was not consistently reproducible), was that the CSS was setting the dimensions to "auto," which is supposed to tell the browser, AFAIK, to use the HTML tag attributes. But, in IE, it superceded them instead, and latency caused it to not have the graphics files in time to receive their dimensions. That, coupled with the fact that IE renders tables as it goes, instead of after hitting the </table> tag, caused the graphics to render incorrectly.
posted by cerebus19 at 11:30 AM on August 4, 2006
posted by cerebus19 at 11:30 AM on August 4, 2006
This thread is closed to new comments.
posted by scheptech at 11:03 AM on August 3, 2006