I am currently working on designing a webpage and running into some issues with Chrome when changing stylesheets for light and dark themes.
Initially, I have included this <link>:
<link rel="stylesheet" href="/css/dark.css" id="theme">
To switch between the themes, I am using this code:
$('#theme').attr('href', "/css/light.css");
There is also code in place to toggle between themes. However, whenever the non-default theme is applied, there seems to be some glitches especially when moving the mouse around. For example, after switching to the light theme:
The page briefly repaints in the new theme but then suddenly turns black (which is not the color of the dark theme). Furthermore, as I continue to move the mouse around:
The white background starts expanding in blocks where the cursor moves until it covers most of the page, at which point it goes back to normal. Alternatively, resizing the window triggers a full page repaint by Chrome.
Even after removing any additional elements like tooltips, the issue persists:
Attempts to trigger a repaint by simulating resize events or manipulating HTML tags through jQuery have been unsuccessful. Replacing the existing stylesheet <link> tag with a new one doesn't seem to resolve the problem either.
Interestingly, this behavior is specific to Chrome as Firefox and Safari do not exhibit these glitches. Any suggestions on how to tackle this issue specifically in Chrome?
Update (March 2014): This webpage forms part of the web UI for GoConvey. While displaying correctly on Firefox, the glitching on Chrome has reduced in frequency and slightly altered, but still noticeable. Feel free to take a look and provide any insights if possible.