Forcing IE8 to rerender/repaint :before/:after pseudo elements

so I've been toying with this calendar-ish thingy for a bit:

Grid of divs (mimicking a table)
Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).

Stripped down fiddle: http://jsfiddle.net/e9PkA/1/

This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).

IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;

    left: -8px;
    top: 6px;
    background-color: silver;
}

.wbscal_icon_arrival.wbscal_full:before {
    background-color: #ff0000 !important; 
}

In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.

In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.

I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.

Is there a JS hack that fixes this and forces :before/:after to update?

Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.

It works for me; hope it helps you!

Adding content:"x" to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.

Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!

@lnrbob really nice answer!!

i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).

so they look like:

input:before {
    content: "" attr(data-on) "";
}

input:after {
    content: "" attr(data-off) "";
}

and the markup looks like this:

<div class="switch off" data-on="It is ON" data-off="It is OFF">
    <input id="switch" name="switch" type="checkbox" class="off">
</div>

and the modification i do in jquery looks like this:

var mSwitch = $('div.switch'),
    on = $.trim(mSwitch.attr('data-on')),
    off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');

and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D

so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)

like that:

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">

Forcing IE8 to rerender/repaint :before/:after pseudo elements

Related

Recent Posts