javascript - iOS 8 css rotate element disappears -

javascript - iOS 8 css rotate element disappears -

i trying css rotate properties work on ios 8. basic thought is, scroll downwards page, card flip around. works on desktop , on mobile ios 7, not ios 8.

what doing updating rotatey, among other properties user scrolls. here js code:

$(window).scroll(function() { scrollvalue = $(this).scrolltop(); if (scrollvalue <= section1top) { scalevalue = 1 - (0.333 * scrollvalue / section1top); rotateyvalue = 180 * scrollvalue / section1top; rotatevalue = -10 * scrollvalue / section1top; $('#card').css('left', cardleft + scrollvalue * 0.33 ); if (rotateyvalue < 90) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg)'); $('#card').css('background', 'url(img/card_tyffon.jpg)'); }else { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_1.jpg)'); } }else if (scrollvalue < section2top - 1100){ $('#card').css('left', cardleft + section1top * 0.33); $('#card').css('background', 'url(img/card_1.jpg)'); $('#card').css('transform', 'scale(0.667) perspective(0px) rotatey(0deg) rotate(10deg)'); }else if(scrollvalue <= section2top){ scalevalue = 0.667; rotateyvalue = 180 + 360 * (scrollvalue - section2top + 1100) / 1100; rotatevalue = -10; $('#card').css('left', cardleft + section1top * 0.33); if (rotateyvalue < 270 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_1.jpg)'); }else if (rotateyvalue < 450 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg)'); $('#card').css('background', 'url(img/card_tyffon.jpg)'); }else { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_2.jpg)'); } }else if (scrollvalue < section3top - 1100){ $('#card').css('left', cardleft + section1top * 0.33); $('#card').css('background', 'url(img/card_2.jpg)'); $('#card').css('transform', 'scale(0.667) perspective(0px) rotatey(0deg) rotate(10deg)'); }else if( scrollvalue <= section3top ){ scalevalue = 0.667; rotateyvalue = 540 + 360 * (scrollvalue - section3top + 1100) / 1100; rotatevalue = -10; $('#card').css('left', cardleft + section1top * 0.33); if (rotateyvalue < 630 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_2.jpg)'); }else if (rotateyvalue < 810 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg)'); $('#card').css('background', 'url(img/card_tyffon.jpg)'); }else { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_3.jpg)'); } } else if (scrollvalue < section4top - 1100){ $('#card').css('left', cardleft + section1top * 0.33); $('#card').css('background', 'url(img/card_3.jpg)'); $('#card').css('transform', 'scale(0.667) perspective(0px) rotatey(0deg) rotate(10deg)'); } else if(scrollvalue <= section4top){ scalevalue = 0.667; rotateyvalue = 900 + 360 * (scrollvalue - section4top + 1100) / 1100; rotatevalue = -10; $('#card').css('left', cardleft + section1top * 0.33); if (rotateyvalue < 990 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_3.jpg)'); }else if (rotateyvalue < 1170 ) { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg)'); $('#card').css('background', 'url(img/card_tyffon.jpg)'); }else { $('#card').css('transform', 'scale(' + scalevalue + ') perspective(1000px) rotatey(' + rotateyvalue + 'deg) rotate(' + rotatevalue + 'deg) scalex(-1)'); $('#card').css('background', 'url(img/card_4.jpg)'); } } else { $('#card').css('left', cardleft + section1top * 0.33); $('#card').css('background', 'url(img/card_4.jpg)'); $('#card').css('transform', 'scale(0.667) perspective(0px) rotatey(0deg) rotate(10deg)'); } });

and css on card:

position:fixed; top:50%; left:50%; height: 508px; width: 330px; margin-top:-254px; margin-left:-165px; background: url(../img/card_tyffon.jpg) no-repeat; background-size: 100%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -moz-box-shadow: 0px 0px 24px #000000; -webkit-box-shadow: 0px 0px 24px #000000; box-shadow: 0px 0px 24px #000000; cursor: pointer;

any help appreciated, not sure changed in ios 8, driving me crazy.

edit: played little more , looks on safari, card displays when rotatey 0 (the card flat). on chrome however, show rotation when stop scrolling, it's rotation isn't applied until end.

edit: seems setting of 'position' causing disappear.

turns out positioning made disappear. did wrap card in container div , set fixed positioning on that. worked charm.

container css:

position:fixed; top:50%; left:50%; height: 508px; width: 330px; margin-top:-254px; margin-left:-165px; -webkit-perspective: 1000px;

javascript jquery css3 ios8 mobile-safari