For my page, I run a calculation in JS that uses values that are measured in CSS pixels. This calculation happens every time the viewer zooms the page. If you'd like to know what the calculation is for, it's used for scaling a div to a desired size depending on the zoom.
This is working perfectly in Firefox across all zoom levels, but I get a certain problem when I test it in Chrome and other browsers. It works fine until you try testing zoom levels below 100% (zoomed-out views). When you're in a zoomed-out view the calculation becomes incorrect (it's bigger than it should be). I think it might be because CSS pixels become smaller than device pixels when you reach zoomed-out views (right?), and because my calculation is in CSS pixel units it no longer is accurate. But if that's the case, then why are my zoomed-out views in Firefox working? In an effort to try to fix the problem on non-Firefox browsers, I converted the calculation to operate in device pixels when in zoomed-out views and that fixed the problem (in Chrome and other browsers), but then when I went back to Firefox to make sure its zoomed-out views still worked, the calculation was no longer correct (it was smaller than it should be).
From my findings, it seems that...
- Firefox expects you to only use CSS pixels (even in zoomed-out views)
- Chrome and other browsers expect you to convert between CSS and device pixels depending on the zoom (CSS pixels when zoomed in, device pixels when zoomed out)
So what's the deal here? How does one create a solution that works for both without browser sniffing?
Also, is it normal to convert between CSS and device pixels depending on the zoom? Or should I just be doing it the Firefox way and only deal with CSS pixels? I don't know which way is considered the normal way, but it seems that most browsers make you convert.