Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Question

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Sample page: http://jsfiddle.net/y2pwqch6/6/

This particular example showcases a CSS selector known as the adjacent sibling selector:

.l:hover + .r {
    color: blue
}

The issue arises when hovering over any element on the page, causing Internet Explorer (up to version 11 on Windows 8.1) to recalculate an excessive amount of styles. To replicate this problem, navigate to the provided example page and move your mouse within the white results area. This can be done by drawing circles or simply moving the mouse vertically without touching any letters. As a result, IE will utilize a single CPU core at 100% capacity; meanwhile, Firefox and Chrome exhibit minimal CPU load in the scenario.

If you do not experience any issues with the example, consider increasing the number of elements on the page for testing purposes or applying the following CSS code to visualize the slow style updates:

div:hover { background: gray }

Potential solutions to address the problem:

Removing the :hover effect

Actions that do not resolve the issue:

Switching to the general sibling selector (~)

Are there any workarounds available for this situation? One option could involve implementing a JavaScript script that applies classes to hovered elements globally.

html css internet-explorer

Answer 1

Answer №1

Here is a solution using JavaScript:

;((() => {
    const selector = '.item';
    $('body').delegate(selector, 'mouseover', e => {
        $(e.target).addClass('CustomHovered');
    });
    $('body').delegate(selector, 'mouseout', e => {
        $(e.target).removeClass('CustomHovered');
    });
})());

Simply replace the :hover with .CustomHovered, and change the selector to fit your needs.

Answer 2

Here is a solution using JavaScript:

;((() => {
    const selector = '.item';
    $('body').delegate(selector, 'mouseover', e => {
        $(e.target).addClass('CustomHovered');
    });
    $('body').delegate(selector, 'mouseout', e => {
        $(e.target).removeClass('CustomHovered');
    });
})());

Simply replace the :hover with .CustomHovered, and change the selector to fit your needs.

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Answer №1

Similar questions

Editing an XML file on the browser and saving it in its original location on the local file system

Reactjs: When components are reused, conflicts may arise in UI changes

Filtering HTML with HtmlAgilityPack using custom queries

Implementing a jQuery change event to filter a specific table is resulting in filtering every table displayed on the page

How can the onclick attribute be modified in an HTML document?

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Incorporate ng-model to manage dynamically generated HTML elements

Include an Open OnClick event in the React/JSX script

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

Exploring various viewport dimensions using Django and Selenium

deactivate a vessel, causing all of its contents to be rendered inactive

Experiencing problems with the calling convention in JavaScript

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Obtain all text within a <div> element by utilizing the agility html package

Options in Joomla Back-end Plugin

The color of the letters from the user textbox input changes every second

unwelcome tab spacing in CSS

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

Designing a scrollbar for a tr element using HTML and CSS