javascript - CSS/JS Clock: Strange positioning behaviour in IE8 -


i trying make animated clock without using images. managed of right; however, when 1 of hands reaches 12, jumps way down bottom of dial , gradually moves upwards , reaches correct position points 3. happens in ie8. idea how fix this?

this html file: https://dl.dropboxusercontent.com/u/39330021/test/css3-js-clock-3.htm

screenshot showing issue:

enter image description here

i guess using css3-rotations ie8 matrix filters fallback. ms matrix filters work bit different: bounding-box of rotated element gets expanded , takes more place before rotation. because bounding box's anchor point top left, image (or other content) moves down , right additionally correct transformation. need compensate movement moving box horizontally , vertically. not easy of task.

static handling:
there few recources on internet helping static examples:

dynamic handling:
dynamic purpose, if really need support ie8, i'd recommend gsap, famous greensock's library port actionscript 3 js. know it's compensating transform origin , has compatible solution rotation in ie8:

gsap animation library


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -