A line of CSS code that crashes Chrome

General CSS code will only cause minor issues with UI layout or compatibility. But here we want to share an interesting line of CSS that can directly crash your Chrome page :)

Reproduction

Open a slightly more complex page in Chrome, such as Zhihu or Nuggets
Open the developer tools and add style to the page <body>: style: "width:1px; height:1px; transform:scale(10000)"
Appreciate the memory usage of Chrome in Task Manager before it crashes

Actually, this machine only has 8GB of memory, but that doesn't matter. Compared to the 4GB red line that makes JS crash, CSS is still more powerful :)

story

The discovery of this line of code stems from a strange phenomenon in our editor project when implementing canvas size adjustment: when the user adjusts the canvas size, as long as the ratio of the new and old sizes exceeds a certain range, Chrome will freeze.

Although this problem is difficult to be triggered by the operation path of ordinary users, the consequences it causes are indeed serious. When troubleshooting, we first considered possibilities such as JS blocking and excessive DOM redrawing, but neither of them was the problem. One breakthrough point was the output of the FPS Meter in the debugger's Rendering tool:

Here the GPU Memory is full. Although it seems obvious now that this prompt message is related to hardware acceleration, without relevant experience we are still unable to determine how it is related to the specific code. It wasn't until we accidentally looked at the introduction to Compositing in the Chrome design document that we discovered a behavior: Blink maps DOM nodes to the rendering tree of LayoutObject. In theory, each node in this tree can have the context of the rendering backend, but in order to save resources, Chrome will merge them before rendering. At this time, elements with CSS positioning (such as absolute positioning and transform) cannot be merged, which will cause additional overhead to the video memory.

Based on this information, we used the Layout tool to debug the page at that time, and indeed found a special place:

The largest rectangular layer in the image is not visible through normal DOM debugging, so we speculate that its excessive size and the resulting RAM overhead are the culprit. Based on this information, we finally found a DOM node with reasonable width and height, but the scale value of the transform may have been modified greatly in the logic. Limiting its scale upper limit can solve the problem: it is not difficult to find that there is an O(N^2) relationship between the scale value and the final corresponding number of pixels. 1 pixel is only magnified 100 times and it is 10,000 pixels. Therefore, when the scale is very large, excessive use of memory/video memory is possible (of course, the browser will do tiling, etc., so this does not conform to the actual situation under normal circumstances, and Safari/Firefox does not have problems at this time). Finally, I filed a bug with Chrome, see #894115

Summarize

It should be noted that due to the lack of in-depth understanding of the browser kernel, the above debugging ideas are likely to be inaccurate. Brief summary:

Hardware acceleration comes at a price, and it’s good to know what the price is
There are a lot of interesting things hidden in the browser's documentation
Some unpopular features of debugging tools are actually very powerful. You can try them more often.

The above is a line of CSS code that makes Chrome crash. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: How to migrate the data directory in mysql8.0.20

>>: Docker primary network port mapping configuration

A line of CSS code that crashes Chrome

How to Set Shortcut Icons in Linux

Vue.js implements the nine-grid image display module

Nginx 502 Bad Gateway Error Causes and Solutions

Web Design Tutorial (5): Web Visual Design

Centos8 (minimum installation) tutorial on how to install Python3.8+pip

A detailed introduction to Tomcat directory structure

Detailed steps for building a React application with a Rails API

Docker completely deletes private library images

Windows Server 2016 Remote Desktop Services Configuration and License Activation (2 Users)

An example of implementing a simple infinite loop scrolling animation in Vue

Recommend

Docker container source code deployment httpd use storage volume to deploy the website (recommended)

MySQL 8.0.25 decompression version installation and configuration method graphic tutorial

Detailed explanation of screen command usage in Linux

The basic principles and detailed usage of viewport

Steps to use autoconf to generate Makefile and compile the project

Mysql classic high-level/command line operation (quick) (recommended)

Perfect solution for vertical centering of form elements

Solution to MySQL unable to read table error (MySQL 1018 error)

CSS3 transition to implement notification message carousel

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Vue's Render function

MySQL 8.0.25 installation and configuration tutorial under Linux

Solution to the problem of English letters not wrapping in Firefox

JavaScript implements single linked list process analysis

Implementation of interactive data between QT and javascript