Cursor/caret bleeding through overlay in IE

Question

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 the menu overlay that pops up, the search field goes under the overlay, but the cursor continues to blink where the hidden input field is. This only happens in IE. The search and product display is an iframe also. I am thinking this is an ie bug/feature depending if you are a user or microsoft.

Answer 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.