CSS styling via data attribute is not working properly on IE - css

Question

I have a list with data attribute "data-layout", it can get two options "vertical" and "horizontal".
In my CSS i change the list items display property according to the layout.
On chrome it works as expected but on IE (tested on IE11) it does not redraw the screen with the change.
If i enter IE's devtools and select on of the items in the elements panel then only it redraws to the correct state.
Here is a reproduction of the problem.
http://fiddle.jshell.net/dimshik/bss3je3u/
Thank you.
document.getElementById('toggle').addEventListener('click',function(){
var list = document.getElementById('list');
if(list.dataset.layout == 'vertical'){
list.dataset.layout = 'horizontal';
} else {
list.dataset.layout = 'vertical';
}
});
[data-layout="horizontal"] li {
display: inline;
padding: 0 10px;
}
<ul id="list" data-layout="vertical">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>

Answer 1

It seems dataset is changing, but not re-rendering the css.
I've changed your code to setAttribute and it worked (IE11);
http://fiddle.jshell.net/bss3je3u/2/

Answer 2

For some reason IE11 doesn't repaint dom when HTMLElement.dataset is used in Javascript
For Example the below snippet doesn't work on IE11 when you click the button - box color doesn't change from red to blue as expected.
To fix this use test.setAttribute('data-action','style'); instead in the button event listener.
var button = document.getElementById('check');
var test = document.getElementById('test');
button.addEventListener('click', function(evt) {
test.setAttribute('data-action', 'style');
});
#test {
width: 200px;
height: 200px;
background-color: red;
}
#test[data-action="style"] {
background-color: blue;
}
<div id="test"></div>
<button id="check">Click Me</button>

Answer 3

This seems like IE isn't seeing that it needs to redraw.
Here's a slightly inelegant approach, but it illustrates the issue.
Adding a function to hide then immediately show to element that should change forces a redraw and the update appears to work.
I'm not sure you'll be able to take this exact thing forward - you may need to choose a different way of forcing a redraw or it may work out that the styles you eventually apply force a repaint so you can lose this altogether, but it does at least perform the switch now.
document.getElementById('toggle').addEventListener('click',function(){
var list = document.getElementById('list');
if(list.dataset.layout == 'vertical'){
list.dataset.layout = 'horizontal';
} else {
list.dataset.layout = 'vertical';
}
list.style.display = "none"
list.style.display = "block"
});