In ie8 if elements don't 'repaint' with the associated css when you change the classname, how can you force the browser to refresh and not kill ie8 performance?
This post (How can I force WebKit to redraw/repaint to propagate style changes?) suggested calling offsetHeight which forces a repaint.
This post (http://www.tek-tips.com/viewthread.cfm?qid=1688809) had a comment that suggested adding and removing a class from body element.
Both of these approaches killed ie8 performance and the first had side-effects on my layout.
What's the best approach?
The solution I came up with for my ie8 issue was to add/remove a class on a near parent of the element i'm changing. Since I'm using modernizer, I check for ie8 and then do this add/remove dance to get the new css to paint.
$uicontext.addClass('new-ui-look');
if ($('html').is('.ie8')) {
// IE8: ui does not repaint when css class changes
$uicontext.parents('li').addClass('z').removeClass('z');
}
The correct answer to this question is that you need to actually change the content
rule.
.black-element:before { content:"Hey!"; color: #000;}
.red-element:before { content:"Hey! "; color: #f00;}
Notice the extra space I added after Hey!
on .red-element
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With