CSS硬件加速触发GPU崩溃

在我正在开发的webapp上，我和我的团队有一些用户在使用我们的应用程序时遇到浏览器崩溃。然后，他们被迫重新启动浏览器。prolem出现在不同操作系统的所有浏览器中。我们还没有在浏览器中找到任何可能影响此问题的插件。我们一直在跟踪我们自己的日志、windows日志等，但没有发现任何可能与问题相关的结果。当我们自己成功触发问题时，我们还观察了CPU-和硬盘的使用情况。但这张图上什么也没有。这让我和我的团队怀疑GPU是否有问题

我们做了一些研究，发现CSS中的动画、过渡、不透明度和变换可以触发CSS崩溃。但我们既没有知识也没有经验来断定问题出在谁

我们正在使用硬件加速CSS如：

transform: translate3d(0,0,0) translateZ(0);

还有一些我们还使用了一些CSS旋转关键帧动画：

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}

在一些遇到浏览器崩溃的用户身上，我们实现了一个功能切换。功能开关删除所有的变换、变换和关键帧动画。他们一直告诉我们，他们认为功能开关是一种改进。但我们无法判断这只是安慰剂还是真的有帮助

因此，在我们从应用程序中删除一系列转换和转换之前，我认为值得检查一下是否还有其他人遇到同样的问题。欢迎所有想法和想法

---

值得一提的是，我们的webapp是一款使用knockout.js的单页应用，

我也遇到过同样的问题，那就是iOS-Safari浏览器崩溃。我写了一些便条，时间贴在下面-

不要使用“过渡中的全部”属性，只使用要设置动画的属性（避免过渡：全部400ms，尝试过渡：颜色） 400ms，背景400ms）

尽可能多地使用关键帧动画

减小文档的大小

减少请求并优化图像

使用translate3D，这将迫使iOS使用3D加速和更好的内存分配

如果您仍然运气不佳，请删除iOS和iOS的所有转换 使用JS制作动画，我知道当你不能使用这个库的时候会很昂贵 就像TweenMax，但这是唯一的解决方案

注意：JS动画可能会影响动画帧速率。使用rAF （请求帧动画）可能会增强一点

***CSS3动画是非常需要的网站动画数量较少，它输出约60 FPS，但JS确实不同的基础上 装置

希望你觉得它有用。我建议你继续使用现有的新功能，试着修复它

---

祝你好运。

我也遇到过同样的问题，那就是iOS-Safari浏览器崩溃。我写了一些便条，时间贴在下面-

不要使用“过渡中的全部”属性，只使用要设置动画的属性（避免过渡：全部400ms，尝试过渡：颜色） 400ms，背景400ms）

尽可能多地使用关键帧动画

减小文档的大小

减少请求并优化图像

使用translate3D，这将迫使iOS使用3D加速和更好的内存分配

如果您仍然运气不佳，请删除iOS和iOS的所有转换 使用JS制作动画，我知道当你不能使用这个库的时候会很昂贵 就像TweenMax，但这是唯一的解决方案

注意：JS动画可能会影响动画帧速率。使用rAF （请求帧动画）可能会增强一点

***CSS3动画是非常需要的网站动画数量较少，它输出约60 FPS，但JS确实不同的基础上 装置

希望你觉得它有用。我建议你继续使用现有的新功能，试着修复它

---

祝你好运。

我肯定会记住这些事情。谢谢你的意见：）我肯定会记住这些事情。感谢您的输入：）工作计算机很少被制造成性能良好的（除非它们必须如此）。也许你对动画、变换等的使用太多了，计算机无法处理？找一台旧笔记本电脑，启动一些CPU/GPU监控软件，然后浏览网站上最炫目的部分。我们已经尝试过了。但在我们的例子中，计算机的硬件似乎是一个很大的参数。拥有良好计算机的用户报告了浏览器崩溃。工作计算机很少被制造成性能良好的（除非它们必须如此）。也许你对动画、变换等的使用太多了，计算机无法处理？找一台旧笔记本电脑，启动一些CPU/GPU监控软件，然后浏览网站上最炫目的部分。我们已经尝试过了。但在我们的例子中，计算机的硬件似乎是一个很大的参数。计算机性能良好的用户报告了浏览器崩溃。