1

How do I most accurately force the browser to recalculate styles, either on the whole body or on a single element?

I can't simply reload the whole DOM by replacing the innerHTML or something, because that would lose all attached event handlers, so I'd need to use something that would just force the browser to recalculate the styles. This does need to work with IE8.

I have tried searching for anything that would fix this problem, but atleast with the term "recalculating styles" I don't get anywhere, and the only related result I could find for "reloading styles" was "How to refresh the style of a page after css switch". That question doesn't work for me though, since I am not directly changing the class of the element that needs to change styles, but its sibling.

Here is a simplified demo, with just the relevant code:

HTML:

<span id="foo">This gets a class,</span>
<div>...and this should become red,</div>
<button onclick="document.getElementById('foo').className = 'foo';">...if you click here</button>

CSS:

span.foo + div {color:red;}

If you test that demo, atleast in IE8-emulation mode in IE11, you'll see that the style won't update. For me, it only updates after I've selected the node in the DOM viewer in the F12 interface. (PS: IE8-emulation mode is in the bottom tab in IE11's F12 interface).

Community
  • 1
  • 1
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • 2
    Please don't use inline JavaScript. It causes poor readability and is generally a bad practice. – Sterling Archer Jan 14 '14 at 19:53
  • 1
    If you need to support IE 8, you should test in IE 8, not in an emulator, which could cause problems that may not be present in a real browser. – Pavlo Jan 14 '14 at 19:53
  • @RUJordan Like I said, I made a simplified version of it. This is just a really quick demo of what it does. – Joeytje50 Jan 14 '14 at 19:54
  • 1
    @Pavlo that neither answers nor invalidates my question. My question remains: how do I force the browser to recalculate the styles? – Joeytje50 Jan 14 '14 at 19:56

2 Answers2

2

I had a similar issue with IE11 - it was bugging out with weird z-index issues in a particular part of a Vue.js app. Inspecting affected elements or resizing the window suddenly caused it to fix itself up.

I found I could force a recalculate style of the whole body in Javascript by adding and removing a style tag with a universal CSS selector:

var head = document.querySelector("head");
var style = head.appendChild(document.createElement("style"));
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
styleSheet.insertRule("* { }", 0);
head.removeChild(style);

Inspired by this answer to another question.

Lucas
  • 21
  • 2
1

Toggle a class on an ancestor of the element being targetted by the + selector:

$('body').addClass('ie_force_restyle').removeClass('ie_force_restyle');

This will force IE8- to re-execute selectors matching for all descendants of the given element.

To be a bit more efficient, you could target #foo's parent as well:

$('#foo').parent().addClass('ie_force_restyle').removeClass('ie_force_restyle');

Demo

Tested on Windows 7 x64 - IE8.

Note: I've only tested this for the adjacent sibling selector +, but I'm pretty sure that it should work for ~, :first-child and other selectors which do not react to DOM changes in old IE.

I can't claim originality though, I've found this solution somewhere in the dark corners of the internet while I was working on my :checked pseudo-class polyfill for IE8-.

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • I'm sorry for taking so long to mark your answer as "accepted", but for some reason, it says "You can accept an answer in 1 minute". Thanks for your help though! – Joeytje50 Jan 14 '14 at 20:03