css :hover not working in chrome for delayed dynamically added classes

user_4376460 0
Viewed 2027

I have the following code, that simply creates a div, which when hovered over, should change its background color to red:

setTimeout(function() {
  document.getElementById('example-id').className = 'example-class';
}, 1);
.example-class:hover {
  background: red;
}
<body>
  <div id="example-id">example text</div>
</body>

This code seems to work in all of the browsers that I've tested it in, with the exception of google chrome. Specifically, I've tested it with the following operating systems and browsers:

  • Windows 10 Home: Version 1703
    • Chrome: 62.0.3202.94
    • Firefox: 57.0
    • Firefox ESR: 52.5.0
    • Edge: 40.15063.674.0
    • IE11: 11.726.15063.0
  • OS X El Capitan: Version 10.11.6
    • Safari: Version 11.0.1

However, if I remove the use of the setTimeout function, so that the class is added to the div immediately, then the code works as expected in all browsers.

So why is this happening? Is this a bug in google chrome, or an ambiguity in some spec somewhere, or is it something else?

google-chrome css-selectors css html javascript
2 Answers

It's definitely a bug in Chrome, props for finding it.

I've filed it here and in less than 24 hours it was marked as duplicate of another bug, which is a duplicate of another bug, in the end tracing back to this one. It appears to have to do with a constants naming conflict, or at least that's what I made of it. (I've spent a fair amount of time last evening following the bug trail, out of sheer curiosity).

It has been reported as fixed by this revision, but I don't know enough on Chromium/Chrome versioning to tell you when that will make it into stable Chrome.

Meanwhile, the fix I found is to force a repaint on the element, after the :hover rule has been declared. For example: transform:scale(1);.

Test for fix, until proper bugfix makes it into stable Chrome:

setTimeout(function() {
  document.getElementById('foo').className = 'bar';
});
.bar:hover {
  color: red;
}
.bar {
  transform: scale(1);
}
<div id="foo">example text</div>

user_18916770

Using Chrome Version 90.0.4430.212 (Official Build) (x86_64), just had to add:

.my_element ul li {
  transform: scale(1);
}

Now all links work on Chrome. Before only some links on the page worked with Chrome, although everything worked on Safari Version 13.1.2 (13609.3.5.1.5). Thanks! Great Solution.

user_101389190
Related