Cursor / carriage bleeding through overlay in IE

Question

I am working on an existing website www.shopthethirdfloor.com. Using IE, if you click on the product menu, focus on the search box, and then scroll down the search field under the overlay menu that appears, the search field goes under the overlay, but the cursor continues to flash where the hidden input field is. This only happens in IE. Search and product display is also an iframe. I think this is a bug / function ie, depending if you are a user or Microsoft.

Answer 1

I am working on the Internet Explorer team and I can assure you that we do not see this as a function. This is a mistake, simple and simple. I added this question and your site to the internal ticket to the question so that the team looked at the next sorting.

For now, you can add validation for document.documentMode and apply some functionality so that Internet Explorer does not show a caret over the top of unrelated elements. In the following code, I use the jQuery $.fn.one to attach a one-time handler during the element .onFocus , and then delete it during the .onScroll event window:

 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 will continue to work with the team to resolve this problem on our part, but so far I hope that this approach will help you with this.