Cursor/caret Bleeding Through Overlay In IE

I am doing work on and existing website www.shopthethirdfloor.com. Using IE, if you click on the products menu, give focus to the search box and then scroll the search field under

Solution 1:

I work on the Internet Explorer team, and can assure you that we don't view this as a feature. It's a bug, plain and simple. I've added this question, and your site, to an internal ticket on the issue for the team to review during the next triage.

For the time being you could add a check for the document.documentMode, and apply a bit of functionality to prevent Internet Explorer from showing the caret over the top of unrelated elements. In the following code I use jQuery's $.fn.one method to attach a one-time-use handler during an element's .onFocus event, and then dispose of it during the window's .onScroll event:

if ( document.documentMode && document.documentMode < 12 ) {
    $( document ).on( "focus", ":input", function ( event ) {
        $( window ).one( "scroll", function () {
            event.target.blur();
        });
    });
}

The results can be seen here: http://jsfiddle.net/yynsbrat/2/

I'll continue to work with the team on resolving this issue from our end, but until this I hope this approach is able to help you in the interim.