vendredi 1 avril 2016

IE11 not updating element visually as result of :checked state change (plus sibling selector, checkbox hack)

I'm using the checkbox hack (well, radio button hack) to control some tabs. This works fine in Chrome and Firefox, but I've noticed that IE11 doesn't update the displayed tab until I resize the window (no media queries involved) or select the element in dev tools' DOM explorer.

To see the issue in action, fire up this test case (http://ift.tt/1X4pxE8) and click on the "second tab" text. You'll see the radio button activate, but the lorem ipsum text won't change. Then resize the browser window and you'll observe the text change.

Anyone seen this before? Anyone know a way around it?

Here's the HTML:

<label for="tab1">First Tab</label>
<input type="radio" name = "tab" id = "tab1" class="explorer-selector" checked>
<div class="explorer-card-contents">
    Lorem ipsum dolor sit amet ...
</div>

<label for="tab2">Second Tab</label>
<input type="radio" name = "tab" id = "tab2" class="explorer-selector">
<div class="explorer-card-contents">
    Proin non justo vel dui laoreet ...
</div>

And here's the CSS:

[type=radio]:not(:checked) + .explorer-card-contents {
    display: none;
}




Aucun commentaire:

Enregistrer un commentaire