CSS transform: translateX flash bug on iOS
css, ios, javascript, jquery
Solution
I fixed this bug and numerous similar, related bugs by editing the viewport meta tag.
Initially, my viewport tag looked like this
<meta name="viewport" content="width=device-width, initial-scale=1>
Now it looks like this
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
Problem
I'm using JS to apply a CSS transform to `.slider` when an element is clicked. I have it working on Chrome, Safari and FF but on iOS (ipad), the slider div is not sliding, it just flashes. It moves correctly to where it should but there is no slide transition. It just disappears for a few milliseconds, then reappears in its correct position. HTML ``` <div class="slider" style="-webkit-transform: translateX(0); transform: translateX(0);"></div> ``` JS ``` $('.right-arrow').click(function() { var slider_margin = parseInt($(this).closest('.slider').css('transform').split(',')[4]); var new_margin = slider_margin - pane_width; $(this).closest('.slider').css('-webkit-transform','translateX('+new_margin+'px)'); }); ``` I've tried adding a redundant 3D transform to all `.slider` divs, to make the browser use hardware acceleration but that didn't help. ``` .slider { -webkit-transform : translateZ(0); -o-transform : translateZ(0); -moz-transform : translateZ(0); transform : translateZ(0); } ``` Other potential causes are I'm using `-webkit-tap-highlight-color:rgba(0,0,0,0);` on some elements but I've tried removing it and it didn't help. If it helps, here's a link to the live app. http://taxhug.herokuapp.com/quiz