CSS fix for sluggish Nette website scroll (Chrome)

tpr

In Chrome the background image is causing performance issues on scrolling the Nette website.

This would fix it (plus remove the background image from “body”):

html:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../img/nette/bg.jpg) 110px bottom repeat-x #3484d2;
    background-size: cover;
    will-change: transform;
    z-index: -1;
}

Alternatively you can simply add “will-change: transform” to the “body” and leave everything as it is now but using a pseudo element is a better approach (the browser doesn't try to optimize the whole body).

Last edited by tpr (2017-02-25 10:26)

GEpic

A little bit overkill not supported in all browsers (also in newest IE).

Using ::before (you have mistake here – if you follow CSS3 standards) is needless for body background with positioning. The way it's written now is common for years (maaany years).

Also I don't have any problem with it in Chrome (and never had on any website).

Lastly doesn't matter if you attach background image to body or html tag. But is good practise to use body tag and leave html tag as is (if you don't need to override overflow, etc.).

Last edited by GEpic (2017-02-25 15:05)

tpr

I've smooth scroll enabled in Chrome (flag) and the scrolling is much worse if will-change is missing. But even if it's disabled it's still perceptible here (win8, core i5, 8gb ram, 2gb vga).

I agree that it's better to add it to the body. In my quick test there was a white stripe in the bottom of the page that's why I used html tag.

Update: after the design facelift it's implemented the way I originally suggested.

Last edited by tpr (2017-09-16 11:54)