javascript and CSS animation conflict - translate doesn't works, opacity does -
i have piece of code tested here: http://jsfiddle.net/pttjx/ simple css animation , js display screen size. code line num. 7 stopt css animation: translate. removing line , works again. didn't find reason that. can confirm bug or faulty code. thanks
<script> function resize(){ var p,h,w,f_factor=1; w=window.innerwidth; h=window.innerheight; p=math.floor(f_factor*(8+w/50)); if(p<4){p=4;}document.body.style.fontsize=p+"px"; document.getelementbyid("dimensions").innerhtml = w + "x" + h; } resize(); </script> <style> .slide_1 { z-index:50; top: 0px; left:0%; position: absolute; overflow: hidden; font-size: 30px; } .slide_1 { -webkit-animation: slide 3s infinite; -webkit-animation-delay: 0s; -webkit-animation-fill-mode:forwards; -webkit-transform-origin: 0% 0%; } @-webkit-keyframes slide { 0%{-webkit-transform: translate(0%);} 50%{-webkit-transform: translate(250%) ;text-shadow: 0 0 10px rgba(0,0,0,1);} 100%{-webkit-transform: translate(0%);} } </style> <html> <span class="slide_1" id="dimensions">abc</span> </html>
this because property null.
i surround document.body.style.fontsize=p+"px";
try/ catch like:
try{document.body.style.fontsize=p+"px";}catch(ex) {alert(ex.message);}
the exception "cannot read property 'style' of null. error means element doesn't exist..
i hope helps ;)
Comments
Post a Comment