Rendering performance optimizations, promote-layer mixin #429
Conversation
* upstream/master: Editting prefixer mixin comment Keep ajax on added i18n strings updated a11y prices and cart table layout added .visually-hidden, removed ie8 conditionals fixed indendation, added hidden text Restoring backface mixin Remove compare price colon - hardcoded in JS added responsive css switch cart over to table layout Transforms should get ms prefix too Getting rid of rendering tweaks which should have been added to this branch Add line item properties to ajax cart. Cleaned up ajax cart JS. Fixing transitions Adding user-select mixin Adding Bourbon-inspired prefixer mixin Removing gradient mixin Removing transition mixin
* 'master' of https://github.com/Shopify/Timber: Fix typo, updated mixin defaults Fix gs Fix excluded keyword in i18n tests
| Layer promotion mixin for creating smoother animations with higher FPS. | ||
| ==============================================================================*/ | ||
| @mixin promote-layer($properties: transform) { | ||
| -webkit-transform: translateZ(0); // translateZ hack |
There was a problem hiding this comment.
Any way/need to add an IE solution to this? I've never really thought about it until now
There was a problem hiding this comment.
When it comes to the rendering optimization game IE's pretty much left out of the conversation since, as far as I know, they have never (historically) offered these kind of tools to developers, nor any insight into how their rendering engine actually works. However, the beauty of the standardized will-change property, as opposed to translateZ, is it's not implementation specific, and so any rendering optimization that IE does build should be based off of this property, making this code "future-proof".
|
Also, if you guys want me to actually put this on a Shopify dev account (let me know what the best way is to do that), I can demonstrate how this code actually does make an improvement to the frame rate of these animations. |
|
Thanks @benknight! If you want to put this up on a dev shop you can sign up for a partners account here: https://app.shopify.com/services/partners/auth/login Here's a doc on creating dev stores once you have a partner's account: |
|
👍 Been using this for awhile and definitely a performance improvement. |
|
Totally forgot to merge this. Great addition, and thanks for the 👍 @zackcote |
Rendering performance optimizations, promote-layer mixin
|
Thanks for merging. It had been pending my providing a demo store link but I was ultimately too lazy to bother. Glad it worked out! 🌴 🌴 |
These are some rendering optimizations while working on a custom theme based on Timber, but I figured I would let them bubble up to the framework.
Basically here we're promoting the drawers to their own compositor layers using
will-changewhen it's supported (Firefox, Chrome) or the infamoustranslateZhack (Safari).Also, I fixed a bug on Chrome Mobile when scrolling inside the drawer when it's visible (screenshot).