search

BKWLD / tram

Cross-browser CSS3 transitions in JavaScript.
186 stars 23 forks source link

GPU layering approach info? #17

Closed FossPrime closed 10 years ago

FossPrime commented 10 years ago

Is there any gpu layer management or creation going on in the background? Or do we manage that as users of the library? I noticed you have transforms and z listed...

danro commented 10 years ago

The only thing tram does by default is set backface-visibility: hidden unless you globally set tram.config.hideBackface = false. This is a good option for folks who prefer to manage their backface-visibility in CSS instead.

As for GPU layering, most modern browsers should auto-promote elements with opacity or transform transitions, but you can always use the old translateZ trick just in case:

tram(elem).set({ z: 0 }).start({ x: 100 });
FossPrime commented 10 years ago

Auto promotion may cause a flash of antialiasing, even a full disappear/reappear on Firefox. But this is good info, it means we can manage this tricky subject ourselves.