Laggy transform: translate on Android, smooth on iOS


#1

I have a card element which you can drag left and right. When you do that, the transform: translate CSS property is set.

This is super smooth on and iPhone 7, but laggy on a Samsung Galaxy S8. I would assume the performance would be great considering both of these phones are high-end.

I am animating the dragging of “cards” horizontally. However, it is laggy on a Samsung Galaxy S8 but super smooth on an iPhone 7. Why is this?

This is the actual code doing it:

this.card.nativeElement.style.setProperty('transform', 'translate(' + translateX + 'px)');

#2

Applying the, previously unknown to me, CSS property will-change: transform; on the element that was being moved did the trick.