CSS feels like a well-understood problem in 2021. The differences in implementations between browsers has narrowed substantially. Internet Explorer is no longer supported by most teams, and Edge is now based on Google’s Chromium, which is the open-source upstream of Chrome. Chrome, Edge and Firefox now all have automatic updates, which has reduced the need for projects like Autoprefixer.
Yet even as the gaps have narrowed, I’ve recently experienced some substantial differences in the way that Chrome performs on my Mac vs my Raspberry Pi. I wrote in a recent article about some of the drawbacks of using background-position: fixed and how scrolling causes a repaint which slows down the frames-per-second. On my Pi, it killed anything resembling smoothness in scrolling. I had reimplemented with some position: fixed trickery and other hacks to deal with the overflow. This improved the performance on the Pi, but caused some bugs in Chrome itself that had to be papered over. Today I ran into even more.
After fixing all the bugs so my implementation would be smooth-ish on my Macbook Pro when hooked up to an external high definition monitor, I tried using my original background-position: fixed on the Mac again. So much smoother! And yet my Raspberry Pi only scrolled smoothly with the hacky implementation I put together.
You can see both implementations in this file on this commit. I’m so tired I can’t think so I won’t go into the details here, but it’s fascinating to me that the performance between these solutions varies so much between these two devices. I’d expect the fast solution to be fast everywhere.
It’s interesting to think about. I’m going to sleep.
Noise in F# 