1

I need to trigger a div to scale down using the CSS scale transform after a few seconds via JavaScript. I've tried toggling a class or setting the CSS manually but either approach is causing a flicker on my iPhone iOS 11 on Safari or Chrome.

The red div first very quickly jumps to the final scale, then back again, and then animates correctly.

On Chrome and Safari on desktop it animates perfectly smoothly.

https://jsfiddle.net/2fy3acup/6/

HTML

<div id="title">
Hello
</div>

CSS

#title {
  background: red;
  transform: scale(1);
  transition: transform 1s;
}

#title.smaller {
  transform: scale(0.3);
}

JS

setTimeout(function() {
// Glitches on mobile webkit
//document.getElementById("title").classList.add("smaller");
// Also glitches on mobile webkit
document.getElementById("title").style.transform = 'scale(0.4)';
}, 1000);

Am I doing something wrong?

Sencha
  • 415
  • 3
  • 12
  • `-webkit-backface-visibility: hidden;` could be a possible solution (originally from https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform) – DriftingSteps Mar 23 '18 at 05:19
  • Sadly none of the fixes similar to this resolve the issue. I've tried lots of the suggestions floating around about setting further 3D CSS properties that resolves flickering, but to no avail. – Sencha Mar 23 '18 at 07:50

1 Answers1

0

After some experimentation I discovered the visual glitch on my iOS device (mobile Safari and Chrome) was caused by the OS. It was not present on other devices, and after restarting my device it worked as expected.

Sencha
  • 415
  • 3
  • 12