I was playing around with the following CSS code:
Nothing fancy there, really. The button
#scrollToTop is hidden from sight when loaded, and when the distance from top is greater than the screen size (i.e. one screen has been scrolled) it pops out by changing distance from bottom with a nice animation.
It worked, of course. No surprise there. But then I picked up my smartphone to check how it looked there, and here’s how it was performing on Chrome:
In comparison, this is how it performs on Firefox on my desktop:
Looking into it, I learned about
will-change CSS property. It’s supposed to tell the browser which elements are about to be changed, to let it prepare resources for processing them. I tried using
will-change: bottom and even
will-change: all, but performance didn’t improve.
will-change I noticed that it’s usually used with the
transform property, so I decided to try and give it a shot, and… voila!
transform properties are more tuned for GPU acceleration, which is widely used by mobile browsers. The more you know…
Oh, and those curious to see how it ended up, here it is:
By the way, I tweaked the appearance logic a little bit to follow the page scroll.
Also, the responsive nature of this blog’s design forced me to bind the scroll event to different elements, based on screen width (that’s what
setVars() is for).