Safari 上的生涩 translate3d animation

Question

I'm getting a strange problem on safari (on both on macOS and iOS). I'm trying to do a bottom drawer in a ionic app (with Angular) and while everything is very smooth on chrome, the drag animation is very jerky on safari and have a lot of "lags" while following the touch event.

Here is my code:

private init() {
    const hammer = new Hammer(this.element.nativeElement, { touchAction: 'pan-x' });

    hammer.get('pan').set({ enable: true, direction: Hammer.DIRECTION_VERTICAL });

    hammer.on('panstart', (ev) => this.onPanStart(ev));
    hammer.on('panup', (ev) => this.onPan(ev, PanDirection.Up));
    hammer.on('pandown', (ev) => this.onPan(ev, PanDirection.Down));
  }

private onPanStart(ev: HammerInput) {
const matrix = getComputedStyle(this.element.nativeElement).transform;
        const y = fromString(matrix).f;

    this.startingTop = y;
  }

private onPan(ev: HammerInput, direction: PanDirection){
    this.direction = direction;
    const position = clamp(ev.deltaY + this.startingTop, this.range.top, this.range.bottom);

    if(this.bounce && ev.isFinal) {
      return;
    }

    this.domController.write(() => this.renderer.setStyle(this.element.nativeElement, 'transform', `translate3d(0, ${ position }px, 0)`));
  }

After some debugging, it seems that the problem come from the translate3d update, so I've tried to run this very simple function to see how it will render and the problem appear is there again:

setInterval(() => {
  const y = this.element.nativeElement.getBoundingClientRect().top;

  this.domController.write(() => this.renderer.setStyle(this.element.nativeElement, 'transform', `translate3d(0, ${ y - 1 }px, 0)`));
}, 1);

Also here is the CSS of the translating element:

width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
transform: translate3d(0, 0, 0);
will-change: transform;

Here is videos illustrating the problem (both run on the same computer):

Chrome: https://streamable.com/acj93

Safari: https://streamable.com/b4887

What's wrong here?

Answer 1

You can try to force the hardware acceleration on the browser to make it look smoother and flicker less.

 width: 100%; position: absolute; top: 0; left: 0; z-index: 100; transform: translate3d(0, 0, 0); /* Add this */ -webkit-transform: translate3d(0, 0, 0,); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;