3 ms·
Adding #container {-webkit-transform: translateZ(0);} puts the whole div as a texture onto the GPU as a composited layer. This improves scrolling massively, but
by rbirkby 13y ago
Adding #container {-webkit-transform: translateZ(0);} puts the whole div as a texture onto the GPU as a composited layer. This improves scrolling massively, but interestingly SVG still has a little bit more jank than the PNG version.
See http://jankfree.org http://jankfree.org
- rbirkby 13y agoA Chrome/Blink issue has already been raised for this: https://code.google.com/p/chromium/issues/detail?id=253091 https://code.google.com/p/chromium/issues/detail?id=253091
- rbirkby 13y agoAnd fixed: http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/graphics/SVGImage.cpp?r1=152895&r2=153069&pathrev=153069 http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/g...
- leptons 13y agoIt probably would also help if this were done as pure inline SVG instead of CSS background images. It doesn't surprise me that adding a ton of SVG background images to the page would cause some browsers to behave badly.