更改样式表时 Chrome 出现故障；我该如何防止这种情况？（附图片）答案

【问题标题】：Chrome glitches when changing stylesheets; how do I prevent this?更改样式表时 Chrome 出现故障；我该如何防止这种情况？（附图片）
【发布时间】：2014-02-22 03:39:14
【问题描述】：

我正在进行网页设计，当我更改样式表时，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 的 Web UI 的一部分。它在 Firefox 中仍然可以很好地呈现，并且此时 Chrome 中的故障不太频繁并且在性质上略有不同，但它仍然存在。如果您觉得慷慨，欢迎任何人来看看。

【问题讨论】：

我想知道这是否与已经加载的cached CSS 文件有关...... Chrome 的效率很高。
Try the method on this site. It looks legitimate and I just tested it with Chrome。它提供function 到add、remove 或swap 外部stylesheets。
@NicholasHazel 我刚刚实现了，但不幸的是，我遇到了同样的问题。
希望我有一个更好的答案给你。如果没有live code，不知道还能说什么。
是的，我希望我能发表这篇文章，但它仍然处于保密状态。不过感谢您的帮助。

标签： css google-chrome stylesheet link-tag

【解决方案1】：

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

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

这会强制 Chrome 使用 GPU 来渲染元素。我不再看到故障了。

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

如果有人想试试这个并实时查看故障，该页面是GoConvey's web UI（Mac 上的 Chrome）。

【讨论】：