secretmop.blogg.se - Css google chrome hack

#CSS GOOGLE CHROME HACK FREE#

On a hefty desktop device with a ton of video memory (VRAM) you’ll likely be able to create a lot of newly backed layers without problems.

#CSS GOOGLE CHROME HACK FREE#

A major benefit of this is on subsequent frames, where if all you do is move layers around or change their opacity, the GPU can handle all the work directly, leaving the CPU side of things free to do something else. Compositing is the process where each of the individual textures uploaded to the GPU is drawn out in turn, and results in one final picture: your page. Where things get really messy is on mobile devices, because they have comparatively limited VRAM, and it becomes easy to exhaust that and end up with excruciatingly poor rendering performance.Įach backing surface is essentially a texture that needs to be uploaded to, and composited by, the GPU.

The layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer).

The layer has a descendant that is a compositing layer.

The layer uses accelerated CSS filters.

The layer uses a CSS animation for its opacity or uses an animated webkit transform.

The layer is used for a composited plugin, e.g.

The layer is used by a element with a 3D context or accelerated 2D context.

The layer is used by element using accelerated video decoding.

The layer has 3D or perspective transform CSS properties.

For the morbidly curious, here are the criteria that Chrome uses to determine if a layer needs its own backing surface:

But in certain circumstances, like when you apply a 3D transform to an element, it gets one of its own.

To the second point, not all newly created layers get a new backing surface (a graphics context into which layers are drawn), some layers happily share a backing surface. Hardware compositing is generally a good thing because it means the GPU will assist Chrome in putting together the page rather than everything happening on the CPU. It creates a new layer with its own backing surface in Chrome.It switches on the hardware compositing mode in Chrome, assuming it's supported for the platform you're on and isn't on already.The translate3d hack, then, does two things: A lot of developers apply it to their elements to give their pages a speed boost so I wanted to take a quick peek behind the scenes (from a Chrome perspective) and see why it works. So you know that magic bullet hack for Chrome (and other WebKit ports) that makes things really zippy? You know, -webkit-transform: translateZ(0) or its good friend -webkit-transform: translate3d(0,0,0) ? Sometimes it’s called the null transform hack.