0

If I set the CSS position attributes of an image element to floating points via javascript, Firefox renders it nicely, but other browsers do not. Can I get sub pixel positioning to work with other browsers? I like to seamlessly zoom in on an image, without jittering due to my values getting rounded off. For example, it seems like 2.217px; becomes '2px;' in all browsers except for Firefox. This happens with setting the value via style.top or via style.webkit-transform: translate(x, y).

Monokai
  • 1,163
  • 2
  • 10
  • 16
  • Why not do the rounding yourself before assigning the value? That way, you'd at least get consistent results. – Pekka Jun 23 '10 at 15:56
  • 2
    seen this - http://ejohn.org/blog/sub-pixel-problems-in-css/ ? – Dr. Frankenstein Jun 23 '10 at 16:06
  • @Yaya3: yes, I've seen it. But that only shows what happens if you define it via percentages. @Pekka: yes, consistency is achieved, but it's not a solution. I'd like to be able to slowly and smoothly zoom in on an image. Firefox seems to render the intermediate steps between whole pixels (like Flash can do), while other browsers do not. I also took a look at the CSS properties `image-rendering: optimizeQuality;` and `-ms-interpolation-mode: bicubic;`, but no dice either. – Monokai Jun 24 '10 at 08:55

1 Answers1

0

In the end, I've managed this by drawing the image on the HTML5 canvas element.

Monokai
  • 1,163
  • 2
  • 10
  • 16