IE10+ Select element options list not interpreted

Question

In IE 10 and 11, a rendered options list of a <select> element doesn't seem to be considered a child of its parent element, at least as far as transitions are concerned.

Assume we have a <div> that is styled using CSS transitions such that on hover, it slides right 100px and off hover, it slides back.

If we add a <select> element inside the <div>, it still slides right on hover. However, if I click the <select> and hover inside the list of <option>'s, the <div> slides back into its original position as if I've moved the cursor outside the <div>, rather than staying transitioned. The only explanation for this I can come up with is that somehow, IE is interpreting the select list or the options themselves as being outside of the parent element.

This snippet shows how it plays out. Try it in Chrome/FF/Safari vs IE10+.

.test {
  position: absolute;
  left: 0;
  transition: left 1s;
  padding: 20px;
  border: 1px solid red;
}

.test:hover {
  left: 100px;
}

<div class="test">
    Move me
    <select>
        <option>Test</option>
        <option>Test</option>
        <option>Test</option>
        <option>Test</option>
        <option>Test</option>
        <option>Test</option>
    </select>
</div>

I've tried this same example in Chrome, Firefox, and Safari and I get the expected behavior - the <div> stays transitioned even when my cursor is on the <select> list. I only see it slide back in IE and I'm thinking it's a browser bug.

If this is somehow intentional by the developers of IE, is there some way to style the elements such that my transition still works?

UPDATE 12/10/14 - At the time of writing, the only two select replacement libraries I found that implement the options list such that it is a child element of the select's parent are Selecter and Chosen. Ended up going with Selecter.

Answer 1

In Internet Explorer we actually implement the dropdown list as a separate window. I am able to see the issue in IE 11 though, and can certainly see how that is frustrating. The good news is it appears we have already addressed this, and shipped the code on http://remote.modern.ie (run from Mac OS X, or Windows).

Expect the change in behavior to land in a future build of IE.