4 ms·
We have a lot of Indian users use our PWA (https://usebx.com/app https://usebx.com/app), so we tried to optimise for low end phones. Generally, we found that an
by osrec 8y ago
We have a lot of Indian users use our PWA (https://usebx.com/app https://usebx.com/app), so we tried to optimise for low end phones. Generally, we found that animations still run reasonably smoothly. The trick was to be really careful not to carry out too much layout thrashing, and use GPU accelerated CSS animations wherever possible. On some of the cheapest devices, we got our animation running as smooth as a Galaxy Note or iPhone. Just goes to show that if you don't over-bloat your app, even low end phones can offer a very good experience.
- untog 8y agoI've been surprised by how performant you can get with CSS transitions and a will-change property. But good grief is it difficult. On one hand I understand why a transition on `left` isn't hardware accelerated but a `translate3d` is, but on the other it seems crazy that we expect people to think and know this kind of stuff when they just want to do something very simple.
- osrec 8y agoI agree with you. Performant animations with JavaScript are generally painful. CSS helps, but can be limited. It can also be a bit fiddly, especially when you want to chain animations together. Perhaps the web animations API will solve this as it matures.
- bgirard 8y agoThat's was my intention when I proposed will-changed. I was trying to get the Firefox OS home screen slide transitions to be performant without hard coding it in the Gecko layout engine.
- untog 8y agoThank you for proposing it! I was astonished by the difference when I used it.
- stefan_ 8y agoThat site literally has a loading popup and constantly changing fonts and UI. Whatever you're doing, its not working.
- osrec 8y agoHmm, I know the initial load is a bit slow, but once that's done, it should be fairly performant. The slow load is caused by our in-browser PDF rendering library. We are due to make it a "lazy load" in the upcoming release, so things should be significantly faster.
- bsimpson 8y agoI've been able to get surprisingly good animation performance on an NBU quality device as well with Houdini's Paint Worklet. You do have to be intentional to get good animation performance on the web, but it's amazing that when you are, you can make transitions that perform better than the ones that come with the phone.
- osrec 8y agoAbsolutely - I've seen native apps struggle to provide the same animation performance as our PWA. It is hard work though, and I've seen even the best web devs fall short on performance. We luckily hired an absolute gem of a developer that thoroughly understood JS and CSS animations. We make sure we retain her, because her work makes our PWA infinitely more usable.
- syspec 8y agoIn the demo, when you mouse over the sales chart it creates a jittery effect. This is because you're setting the position of an element that has a transition with a curve. In effect it's restarting its animation every time you move the mouse, causing it reset its velocity.
- osrec 8y agoMay I know which browser and OS you're using please?
- StavrosK 8y agoA bit off-topic, but does the OS matter? Don't all browsers render the same between OSes? Although I can see them being different in things like font rendering...
- osrec 8y agoIt can matter, depending on what responsibilities the particular browser offloads to the OS. I just like to ask, so we can diagnose issues fully :)
- vanderZwan 8y ago> Don't all browsers render the same between OSes? Canvas fingerprinting wouldn't be as effective if it did