Chrome glitches when changing stylesheets; how do I prevent this?

Question

I'm working on a web page design and Chrome is wigging out when I change a stylesheet. I'm trying to switch between light and dark themes.

I have this <link> to start:

<link rel="stylesheet" href="/css/dark.css" id="theme">

To change the theme, I'm doing this:

$('#theme').attr('href', "/css/light.css");

I have code to actually toggle (loads dark if light is loaded, and vice-versa). Whenever the stylesheet of the non-default theme is loaded, it likely -- but not always -- glitches after I move my mouse around. For instance, after I first toggle the theme to the light theme:

glitch 1

It actually does repaint the full page with the theme for a split second, but then it turns the screen black (but it does not revert back to the dark theme, as the dark theme is not black; it actually has a dark gradient).

When I move the mouse around some more:

glitch 2

glitch 3

The white area expands in blocks over where my mouse is moved, until I move it over most of the page it goes back to what I expect. Or, I can resize the window and Chrome fully repaints the page as expected.

Removing the fancy tooltip doesn't fix the problem:

still glitchy

I've tried invoking a window resize event. I've tried using jQuery to show/hide the html and body tags to try to trigger a repaint. I've also tried deleting the theme's <link> tag entirely and adding a whole new one to the DOM. Alas, I see the same effect.

Firefox and Safari don't behave this way. But I absolutely have to get this working on Chrome. Any ideas?

Update (March 2014): This page is part of the web UI of GoConvey. It still renders fine in Firefox, and the glitching in Chrome at this point is less frequent and slightly different in its nature, but it's still there. Anyone is welcome to take a look if you are feeling generous.

I wonder if it has to do with the `cached` `CSS` file already being loaded... Chrome is pretty efficient that way. — Nicholas Hazel, Jan 30 '14 at 01:37
[Try the method on this site. It looks legitimate and I just tested it with Chrome](http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml#demotable). It provides a `function` to `add`, `remove`, or `swap` external `stylesheets`. — Nicholas Hazel, Jan 30 '14 at 01:41
@NicholasHazel I just implemented that, but unfortunately, I am experiencing the same issue. — Matt, Jan 30 '14 at 04:18

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Wow. Here's the CSS hack to fix it:

-webkit-transform: translate3d(0, 0, 0);

This forces Chrome to use the GPU to render the element. I no longer see the glitching.

Update about a month later: Okay, well, I've continued to develop this web app and now the glitching is back. Still trying to work around it. Now sometimes the whole viewport goes blank and I have to resize the Chrome window in order to get it to re-appear.

If anyone would like to try this and see the glitch live, the page is GoConvey's web UI (Chrome on Mac).

Chrome glitches when changing stylesheets; how do I prevent this?

1 Answers1