Css transition is incompatible when triggered when pressed

Question

I start css position change (with css transition animation) when the user scrolls below a certain point. This works fine on chrome / safari on PC, but inconsistent on iphone. Sometimes it jumps, and not revives, sometimes it does nothing and animates animatedly.

I tried using jQuery animate, added translate3d and placed the element on my own layer, all of which gave the same results.

Here is the code:

var logoUp = false; $(window)[0].addEventListener('touchmove', function(e) { console.log($(window).scrollTop()); if ($(window).scrollTop() > 33) { if(!logoUp){ $('.trig_logo').css({ 'top': '-90px' }) logoUp = true; } } else { if(logoUp){ $('.trig_logo').css({ 'top': '0px' }) logoUp = false; } } }) 

CSS

 .trig_logo { background:url(/img/head_foot/logo.png) center 0px no-repeat; height:400px; position: absolute; width:100%; top:0px; -webkit-transition: 0.25s top; } 

Answer 1

I am surprised that -webkit-transition works on the iPhone in general.

Usually you will see something like:

 -webkit-transition: .25s top; -moz-transition: .25s top; -o-transition: .25s top; transition: .25s top; /* <-- actual standard */ 

Are vendor prefixes excellent? ( not )