search

kolkov / ngx-gallery

A simple responsive native gallery component for Angular 8+.
https://ngx-gallery.kolkov.ru/
MIT License
115 stars 56 forks source link

GPU Acceleration for slide effect using translateX instead of left position. #22

Closed Simbaclaws closed 4 years ago

Simbaclaws commented 4 years ago

Hi,

I noticed the plugin uses position left in order to animate where it is sliding towards.

This is a bad way of animating a sliding effect as it is not hardware accelerated and therefore is slower and worse for performance.

Please use: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX instead.

For more information see the answer talking about composite, layout and paint layers in web browsers in this thread: https://stackoverflow.com/questions/7108941/css-transform-vs-position

For more in-depth information see this google page: https://developers.google.com/web/fundamentals/performance/rendering

Here is a free course about the subject in case you are interested: https://www.udacity.com/course/browser-rendering-optimization--ud860

Simbaclaws commented 4 years ago

I created a pull request for this issue here: https://github.com/kolkov/ngx-gallery/pull/23

Simbaclaws commented 4 years ago

Pull request has been merged, this issue is solved and can be closed.