IE 11 Bug - Image inside label inside form

Question

In IE11, the following piece of code will check the radio button as expected:

    &l         


        

Answer 1

It works with

img {
  pointer-events: none;
}

Answer 2

As I answered previously in the referred question, there is a pure CSS way.

If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:

CSS:

label img{
    display: block; /* requirement */
    /* fix */
    pointer-events: none;
    position: relative;
}

/* fix */
label{
    display: inline-block;
    position: relative;
}
label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

HTML:

<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>

Fiddle

If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)

Answer 3

My markup looks like this (classes and other superfluous attributes removed):

<li>
    <label>
        <figure>
            <img>
        </figure>
        <div>
            <label></label>
            <input type="radio">
        </div>
    </label>
</li>

It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:

img {
    pointer-events: none;
}

I didn't need to change anything else and I have no other special css-trickery that I can see.

Answer 4

img {
    pointer-events: none;
    position: relative;
    z-index: -1;
}

This solved it in my case. The img will be placed behind the label but "shine through". I hope it helps.

Answer 5

Here is a solution that worked for me using pointer-events:none without having to set my image to position:relative as I needed it to be position:absolute for my design.

HTML

`<form>
    <input id="radio-button-action" type="radio" name="search" value="open">
    <label for="radio-button-action">
        <div class="img-wrapper">
            <img src="images/image.jpg" alt="image">
        </div>
    </label>
</form>`

CSS

So in this example we have an image that needs to be position: absolute

img {
    position: absolute
    top: 10px;
    right: 10px;
    height: 25px;
    width: 25px;
    display: inline-block; /* can be block, doesn't matter */
}

Now set pointer-eventson the img-wrapper div

.img-wrapper {
    position: relative /* this is required for this to work */
    pointer-events: none /* this is what will make your image clickable */
}

Answer 6

This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.

Nest Your Input

<label>
    <input />
    <img />
</label>

This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.

JavaScript Patch

Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:

$("label[for]").each(function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    $(this).on("click", function () {
        timeout = setTimeout(function () {
            element.click();
        }, 100);
    });

    element.on("click", function () {
        clearTimeout(timeout);
    });

});

Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.

Demo: http://jsfiddle.net/CG9XU/

One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:

$(document).on("click", "label[for]", function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    timeout = setTimeout(function () {
        element.click();
    }, 100);

    element.one("click", function () {
        clearTimeout(timeout);
    });

});

The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.