Cursor or caret bleeding through overlay on Internet Explorer

Question

Cursor or caret bleeding through overlay on Internet Explorer

Currently, I am working on a pre-existing website called www.shopthethirdfloor.com. When using Internet Explorer, if you navigate to the products menu, select the search box, and then scroll down so that the search field goes underneath the menu overlay that appears, the search field remains hidden under the overlay while the cursor continues to blink in the location of the hidden input field. This issue seems to only occur in Internet Explorer. Additionally, both the search function and product display are within an iframe. It's possible that this behavior is due to a bug/feature specific to Internet Explorer, depending on whether you view it as a user or from Microsoft's perspective.

html css internet-explorer

Answer 1

Answer №1

I am a member of the Internet Explorer team, and I want to clarify that we do not consider this behavior to be intentional. It is actually a bug that we are looking into fixing as soon as possible. Your question and website have been added to our internal list for further review by the team.

As a temporary solution, you may want to check for the document.documentMode property and implement some code to prevent Internet Explorer from displaying the caret over other elements. The code snippet below utilizes jQuery's $.fn.one method to create a one-time handler during an element's .onFocus event and remove 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();
        });
    });
}

You can see the results in action here: http://jsfiddle.net/yynsbrat/2/

We are actively working on resolving this issue, but in the meantime, I hope this workaround proves helpful to you.

Answer 2

I am a member of the Internet Explorer team, and I want to clarify that we do not consider this behavior to be intentional. It is actually a bug that we are looking into fixing as soon as possible. Your question and website have been added to our internal list for further review by the team.

As a temporary solution, you may want to check for the document.documentMode property and implement some code to prevent Internet Explorer from displaying the caret over other elements. The code snippet below utilizes jQuery's $.fn.one method to create a one-time handler during an element's .onFocus event and remove 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();
        });
    });
}

You can see the results in action here: http://jsfiddle.net/yynsbrat/2/

We are actively working on resolving this issue, but in the meantime, I hope this workaround proves helpful to you.

Cursor or caret bleeding through overlay on Internet Explorer

Answer №1

Similar questions

How can one address the issue of undefined data within table cells?

What is the best way to click on a specific webElement in a group of webElements using Python Selenium?

Four-pointed star design with rounded edges

Integrating a footer into the enhanced search tab slider

An image that is in motion at an inappropriate time

Utilize custom fonts from your local directory within a Vite Vue3 project

Guide on sending a key to a text input field using JavaScript

Enhancing the aesthetic appeal of a form

Click to dynamically toggle classes with jQuery

When the React-bootstrap Popover arrow is oriented vertically, the arrow colors appear to be inverted compared to when it

Contrast in spacing: comparing display block versus inline-block

The page switch with a jittery effect

Is there a way to align the text input and text area next to each other?

Ways to prevent the hover state from activating when the mouse is in the corner of a circular QPushButton

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

Headline at the top of the page, perfectly centered with a division below

Trick to keep horizontal element alignment intact when scroll bar appears

Tips for navigating a user to a different HTML page using JSP code?

material-icons appear differently when letter-spacing is applied in iOS browsers

Ensure that the width does not decrease