CODEWITHSUNDEEP
javascriptcssangularscaletransition
A. Pistoor
A. Pistoor

Reputation: 41

Unwanted delay at animating 'transform: scale()' in Safari with css in Angular

I build an angular app in that i am trying to animate zooming and parallel moving of a graphic. I am using css transform for the zooming (scale) and moving (translate) part and css transition for the animation. That works well in desktop browsers (Firefox and Chrome on Windows) but I have an unwanted delay in Safari on IOS (iPad Air). That is always round about 2 seconds and does not vary. The animation starts right after that delay and seems to work perfectly fine. I noticed that the delay is gone if I don't use the scale-option but I cannot go without scaling the whole div because it needs to match the screen size.

I have tried to use other animation possibilities like ng-animate (https://github.com/jiayihu/ng-animate) but probably the zoom function of that library uses scale too because I got the same problem with that.

Some simplified code: I first initialize the component with scaling parameter:

scaleUI() {
  var previewArea: HTMLElement = document.querySelector(".previewArea");
  previewArea.style.transform = "scale(0.3, 0.3)";
  previewArea.style.webkitTransform = "scale(0.3, 0.3)";
}

On click I set the new scaling parameter and translate values:

var previewArea: HTMLElement = document.querySelector(".previewArea");

previewArea.style.transitionProperty = "transform";
previewArea.style.webkitTransitionProperty = "transform";
previewArea.style.transitionDuration = "1s";
previewArea.style.webkitTransitionDuration = "1s";
previewArea.style.webkitTransitionDelay = "0.1s";
previewArea.style.transitionDelay = "0.1s";
previewArea.style.transitionTimingFunction = "ease";
previewArea.style.webkitTransitionTimingFunction = "ease";

previewArea.style.webkitTransform = "scale(0.5, 0.5)translate(-" + value1 + "px, -" + value2 + "px)";

Even if I remove the scale after click the delay is present. Only if I remove the scale completely of that component the delay is gone.

Can anybody recommend another way to do the scaling that is maybe not affected by this error? Or is there a way to fix this?

The used iPad is an iPad Air 3 on iOS 12.3.1. Same problem on iPad Air 2 on iOS 12.3. Delay is NOT present on iPhone 7 on iOS 11.4.

Upvotes: 3

Views: 616

Answers (1)

A. Pistoor
A. Pistoor

Reputation: 41

I fixed this bug later. Not by using another method to scale but by changing the background image. I used a background image with a huge file size. That seemed to produce the delay on mobile devices. As I changed the background image to a smaller one, the delay was gone.

Upvotes: 1

Related Questions