I’ve run into an IE 7 bug that I’ve been unable to fix. I’m hoping some of you, dear readers, can help me figure it out.
I’m working on some styled buttons, created with the <button> element and some pretty basic CSS. In IE 7, if you scroll down the page so that the buttons move out of the viewport, then scroll back up to reveal them again, you’ll see lines of missing pixels drawn across the text of the buttons. It varies each time you scroll, so sometimes you won’t see any lines, and occasionally the entire text will disappear. The lines appear most often with the buttons with the largest text, but I think this is mainly just due to there being more pixels there to draw lines through, increasing the likelihood that IE 7 can screw it up. Hovering over the buttons or refreshing the page restores the text.
You can see a screenshot of the bug below, and view the bug live in IE 7 in my test page.
The buttons in IE 7 have lines drawn through their text, as if little strips of the text were erased.
I found a blog post that said that adding a one-pixel transparent border fixed the bug. I tried this and found that it does indeed fix the bug, but only if you remove either background-color or font-size. Both of those properties trigger the bug to begin with, and the border fix seems to only have enough power to fix one of the triggers, not both. I can’t remove either of those properties, so the border fix is a no-go. (Plus, the border does not actually show as transparent when I tested it, which makes it a deal-breaker anyway.)
Through experimenting, I found that removing overflow:visible also solves the bug. Unfortunately, that brings back the excess padding button bug that IE 7 and IE 6 suffer from. Setting overflow:visible seems to be the only fix for this bug, so this too is a property I can’t remove.
I of course tried the standard fixes of adding zoom:1 and position:relative, but neither of these, either together or separately, had any effect on the buttons.
I’ve tried so many things and I’m out of ideas. Can anyone help?
I managed to remove this issue by getting rid of
overflow: visibleand changing todisplay: inline. This should also mean that the double margin/padding bug in IE6/7 is bypassed. Worked for me at least!Instead of using height: auton on the main button class, setting a specific height on each of the btn-size classes should prevent this from happening.
It in fact does not work at all! I’m an idiot but I’ll keep trying!
Ok, this one actually does work! I added the 1px transparent border and also floated the buttons left, this has seemed to solved the issue, hope it helps!
I also had this problem and did some “research” on it and actually wrote a draft for a blog article on that (I should really finish it ;)), the spicy part is:
[…] Unfortunately this triggers a rather annoying display problem in IE7: If you scroll the button out of the viewport of the browser and then scroll back, the button will vanish or gets visually corrupted as long as you move your mouse over it. Thankfully there exist a fix for this (mis)behaviour too, just give the button a height (this has nothing to do with hasLayout by the way)
Our buttons have a height of 23px, so:
button {
[...]
height: 23px; /* fixes IE7 scrolling refresh */
overflow: visible; /* fixes IE7 button padding */
[...]
}
It’s definitely the “overflow:visible;” padding bug fix. When I remove this rule from the document it works fine for me:
http://dl.dropbox.com/u/126928/ie7_button_text_redraw_bug.html
Now, how to fix the padding issues? Let me work on this for a bit longer and I’ll post back what I find. π
OK, take a look at this version:
http://dl.dropbox.com/u/126928/ie7_button_text_redraw_bug.v2.html
I tried a few different things just to be sure, but it does in fact appear to be the overflow: visible; padding hack that’s causing this. So what I did was remove the padding on those items with an IE7-specific stylesheet hidden with a conditional comment. This is probably less than ideal as we’re still dealing with the padding bug and to deal with it we’re simply removing the padding in IE7. But, it’s the only solution I could come up with that worked. Hope it helps. π
You can use a filter to trigger the render engine. I’ve used filter: alpha(opacity=100). It works π
Does a proprietary filter fix it? Like
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=99);Thank you all so much for taking the time to check this out, play with, and post fixes. I really, really appreciate it!
@JeffreyPia and Mark Schuette, I couldn’t get your height fix to work for some reason. Tried both ems and pixels as a unit. No luck. π
Dan Cowley, I couldn’t get the float and border combination to fix it either. Also, floating wouldn’t work in my particular case because I need to sometimes center these buttons.
Billee D., unfortunately I have to have the same padding across browsers here, so removing the side padding in IE 7 is not an option. But thanks for trying it out!
htmlboy and Ingo Chao, the filter works! Looks like we have a winner! My only concern is what this might do to performance. I know that many of these Microsoft filters have bad side effects of slowing IE considerably. Is the opacity filter pretty safe in this regard, do you know?
I’ve run in to this same issue and setting min-height fixes it for me
Scrub that. I’ve just done some testing on a recent project and it doesn’t work consistently π
Yeah, I couldn’t get it to work either. Dang!
@ZOE, @HTMLBOY and @INGO. I had no success using the filter technqiue. It did improve the demo, but there was still the same problem occurring sparaticolly.
I found a decent workaround which seems to do the trick. It involves wrapping the button’s text with a span:
Button text
Then, instead of applying the padding to the button element, it is instead applied to the tag, like so:
.button span {
display: block;
}
.btn-size1 span {
padding: 11px 20px;
font-size: 20px;
}
.btn-size2 span {
padding: 8px 20px;
font-size: 14px;
}
.btn-size3 span {
padding: 6px 10px;
font-size: 12px;
}
I can’t get this to work. Did you also take overflow:visible off the buttons? Removing that and setting padding to zero on the buttons unfortunately doesn’t fix the excess padding bug.
@zoe, unfortunately, the filter has a performance issue because of the reflow it constantly causes. I think it is the reflow that you want in order to kill the bug. But that is purely hypothetical. I don’t know. Personally, I would leave the bug unfixed, once the cause and the fix is known to you for academic reasons. IE7 causes more headaches than a zebra-button on backscroll, and users should see a box telling them to update to a recent browser anyhow.
@ZOE Well it appears my initial solution was flawed as when I tested it more closely it still had the redraw issue.
However, I did find a workaround. It has the stench of hackiness, but nothing to bad… π
The demo, using your code can be found here. In the spirit of hacks, I’ve used an IE7/6 * hack to show the fix. Like my previous version, this requires using an embedded span tag within the button.
The solution basically removes your overflow: hidden style and then to get around the extra padding, I set the font size to 0 pixels. Then, with the extra span tag, I re-init your font size and padding. Seems to work great!
http://www.lifeathighroad.com/labs/ie7button.html
Mike, I copied your page and tried adding a button with much longer text. If you do this, you’ll see that IE is still increasing the padding far beyond the size specified in the CSS. So, sadly, it appears that setting font-size to zero has not fixed the excess padding bug. That was a really good idea to try, though, and I’m grateful you put the time into trying to come up with a fix!
Zoe, haha it’s an interesting issue to say the least, but one that is worth the time it takes to find a fix I think! π
A new version of the demo:
http://www.lifeathighroad.com/labs/ie7button.html
This version is identical to the previous one, except I add back the “overflow: visible” to the button. For some reason, there no longer is any text redraw issues.
It appears applying either padding and/or font-size to the button element itself is the main culprit for why this bug occurs in IE7.
Mike, that does work great now! Thanks! I changed it slightly–made the nested span block so I could apply top and bottom padding to it instead of the button.
Another thing I discovered with using the span is that it allows you to kill the text shift that occurs on the text when you click the button in IE (which is not a bug per se, but you may not like it). Adding position: relative to the span on :active kills the shift in IE 8 and IE 9. Unfortunately it does nothing in IE 7, apparently just because IE 7 has incomplete support of :active.
Great stuff – glad to hear that its working for you as well! π
Even our designers came across the same issue and i was searching for way to fix this issue and i found this article.Now we fixed this, issue.Thanks for wonderful article and suggestions.
I think I find a simpler hack that will fix this IE7 text redraw bug: Set the height of your button to 100%.
Previously, following Mark Schuette’s suggestion, I set my button’s height to 27px… but it still triggers the bug. But then randomly I switch that to 100%, and the redraw bug stops.
Not sure why it works, but the button’s text stays normal in IE7 when I test scrolling with this setting.
So this is how my style looks like:
.button {
[…]
overflow: visible; /* fixes IE7 button extra padding */
height: 100%; /* fixes IE7 text redraw bug */
[…]
}
Can somebody else here test this out?
The approach of using height: 100% works on my buttons, but then when I tried testing it on your testing page, the bug was still there… π
But then I noticed that the bug only affected the first huge button (21px font-size). So I think this bug is only triggered if the height of the text goes beyond a certain height. So if you keep your font size below that height, the bug will be taken care of.
Thus I think the easy way to deal with this bug is to define:
1. height: 100% or height: auto;
2. Use the font-size to control the height of your button. But make sure not to exceed the height that will trigger the bug (You may need to do some trial and error to get the right height).
Hope that helps. God bless you.
I had to fix this bug for a website once. Setting a height almost did the trick for me. ‘Almost’ because I couldn’t set it to 100%, it had to be a specific pixel value (to maintain consistent outline design).
Giving the button a line-height (equal to the button height minus padding-top minus padding-bottom) worked.