IE11 bug: radiobuttons / button sometimes stays on hover state

[sander6]

Hi all,

i have been asked to look at the following website: https://www.examensprint.nl/leerling/bestellen/

On this page people select a school degree, a profile and some schoolclasses and then they get redirected to a shop to buy stuff.

But, the issue is that the big yellow buttons (wich are radiobuttons) have a hover state and sometimes stay active.

I have looked at the css, cant find anything weird. Wich on the other hand is logical bacause the website works great on chrome and firefox. But somehow IE11 does not like it.

Can someone please look at this and maybe help me find an answer?!

[ronpat]

Have you validated the code on your page? Invalid code cannot be relied upon to work cross-browser.

eg:

<label data-level=".level_vmbo" for="level_vmbo" class="btn__label filterGridButton">
<div class="btn__radio"></div>
VMBO (K)-gt
</label>

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.examensprint.nl%2Fleerling%2Fbestellen%2F

Click the “message filtering” button for a concise summary view. Notice specifically:

Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.) (33)

This should be considered a critical error.

[PaulOB]

@sander6

But, the issue is that the big yellow buttons (wich are radiobuttons) have a hover state and sometimes stay active.

I can’t get it to go wrong in my IE11 but I have run into problems before with the check box hack in IE11.

Quite often IE11 seems to forget to redraw the background on a state change. I’ve usually found that by changing width, height, border or something that causes a redraw then the element begins to work properly.

I suggest you perhaps add a border on hover (which can be the same color as the background) and at the same time remove an equal amount of padding so that the element’s dimensions are the same (or whatever you need to do to keep it the same size).

As I said my IE11 seems to be behaving so I can’t test this out and indeed your use of SCSS makes this almost impossible to debug easily. ( off-topic: Such an easy thing is made almost impossible to debug on the fly. As you can guess I am not a fan of pre-processors even though I know they can do some clever things but ultimately they always get in my way (and I’m a debugging expert ).

Also as Ron said the use of the div inside the label is not valid and could cause problems in older browsers.

[sander6]

@ronpat @PaulOB Thank you both so much. I am sure this is going to help me fix the problems!