更换样式表时Chrome会出现故障;我该如何防止这种情况？ （带照片）

Question

我正在进行网页设计，当我更改样式表时，Chrome正在摆弄。我正试图在明暗主题之间切换。

我有<link>开始：

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

要改变主题，我这样做：

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

我有实际切换的代码（如果加载了光，则加载暗，反之亦然）。每当加载非默认主题的样式表时，我可能 - 但不总是 - 在我移动鼠标后出现故障。例如，在我第一次将主题切换到 light 主题后：

它实际上用一瞬间重新整理了整个页面，但随后它将屏幕变黑（但它不将返回转换为黑暗主题，因为黑暗的主题不是黑色;它实际上有一个黑暗的渐变）。

当我将鼠标移动一些时：

白色区域在鼠标移动的地方以块的形式扩展，直到我将其移动到页面的大部分区域，然后回到我期望的状态。或者，我可以调整窗口大小，Chrome会按预期完全重新绘制页面。

删除花哨的工具提示并不能解决问题：

我试过调用一个窗口调整大小事件。我已经尝试使用jQuery来显示/隐藏html和body标签以尝试触发重绘。我还尝试完全删除主题的<link>标记，并在DOM中添加一个全新的标记。唉，我看到同样的效果。

Firefox和Safari不会这样做。但我绝对不得不在Chrome上使用它。有什么想法吗？

更新（2014年3月）：此页面是GoConvey的网络用户界面的一部分。它在Firefox中仍然很好，而Chrome在这一点上的故障发生频率较低且性质略有不同，但它仍然存在。如果你感到慷慨，欢迎任何人看看。

Answer 1

哇。 Here's the CSS hack要修复它：

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

这迫使Chrome使用GPU渲染元素。我不再看到故障了。

大约一个月后更新：好吧，好吧，我继续开发这个网络应用程序，现在又出现了故障。仍在尝试解决它。现在，有时整个视口都会变成空白，我必须调整Chrome窗口的大小才能重新显示。

如果有人想尝试此功能并立即看到故障，则页面为GoConvey's web UI（Mac上的Chrome）。