Member Avatar for Buppy

Hi,

I have a list of elements in my page within a <div> tag. The list looks fine in other browsers, however, in Chrome it is slightly misplaced on load. All elements falls back into correct place if i mouseover them. Also, the misplacement seems to be random, sometimes it's even showed correctly. Anyone else had this issue before?

Thanks

  • 3 Contributors
  • 2 Replies
  • 91 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Biiim

Dani AI

Generated

This thread describes a Chrome-only rendering glitch that corrects after a hover. reported the symptom, asked whether the hover intentionally moves elements, and correctly noted there was no code to inspect. The usual causes are easy to test for: repaint/compositing differences, delayed webfont metrics, or layout-affecting transitions/positioning.

Try this focused triage (minimal steps first):

  • Create a tiny reproducible case: plain HTML + the CSS that styles the list (remove external scripts and fonts).
  • Test in the latest Chrome and in an incognito window (to rule out extensions).
  • In DevTools: use Elements > :hov to force :hover and compare computed styles before/after. Use the Rendering panel (paint flashing) to see what repaints.
  • Temporarily disable webfonts or preload them (font loading can shift layout). Also toggle Chrome hardware acceleration (chrome://settings/system) to see if GPU compositing is involved.

If isolation shows a rendering/compositing issue, try these pragmatic fixes (apply only to the affected element):

.your-container {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

These force a compositing layer and often eliminate “first-paint then move on hover” glitches. Use them sparingly — many promoted layers hurt memory and performance. If a quick JS workaround is needed while debugging, forcing a synchronous reflow on load can help:

window.addEventListener('load', function() {
  var el = document.querySelector('.your-container');
  if (el) void el.offsetHeight; // forces a repaint/reflow
});

When asking for help, include a minimal HTML/CSS test case, the Chrome version and OS, and whether webfonts or CSS transitions are used. That makes root-cause diagnosis and a permanent fix much faster.

Recommended Answers

All 2 Replies

Member Avatar for Mbot

Is your mouseover suppose to reposition them in any way or does it have a completely unrelated purpouse?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.