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:
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:
Comments
Post a Comment