1

The following javascript code returns two different values for Chrome and Firefox for the same page element.

$('.abc').css("top");

Chrome returns: 114px
while Firefox returns 114.1230px

I've tried this several times on the same page and Chrome consistently chops off the decimal point and the following digits.

Any suggestions on how I can get the full value within Chrome as well?

Haluk
  • 2,091
  • 2
  • 27
  • 35
  • I wonder if Chrome is returning the true value (how can you have 0.123 of a pixel?) whereas Firefox is returning the value you have set in css? – Richard Dalton Sep 28 '11 at 15:20
  • Related I think: http://stackoverflow.com/questions/2571035/computed-width-with-decimal-values-in-firefox-but-without-decimals-in-webkit. – pimvdb Sep 28 '11 at 15:22
  • And this: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – Blender Sep 28 '11 at 15:26
  • decimal pixels could hypothetically be useful when zooming/resizing a page. The iPhone 4, for example, doubles all CSS sizes to make older pages look good on its high resolution screen (that's going to work well going forward...), so 1 css pixel is actual 2x2 screen pixels. .5 css pixels would theoretically be an actual screen pixel. (Though I'd guess mobile safari does the same rounding chrome does) – Mike Ruhlin Sep 28 '11 at 15:33
  • You are correct but it is the job of the device to correct properties for PPI adjustment, not the programmer. – Chris G. Sep 28 '11 at 15:40

4 Answers4

2

Firefox is a little special in this case... it supports decimal pixels. This means that if you set a height OR width on f.e. an image, it will resize the picture and this calculation will contain (most likely) decimal pixels. This is the same with divs, it gets calculated and decimals are used in firefox.

As far as I know, firefox is the only major browser that support decimals...

If you need full pixels, try a regex expression or something to remove the decimals if you have a string or floor() if you have a number.

JNDPNT
  • 7,445
  • 2
  • 34
  • 40
  • Thank you. Math.floor() helped me equalize both browsers. Good explanation on how firefox behaves different. – Haluk Sep 28 '11 at 15:50
1

Try: $('.abc').offset().top or $('.abc').position().top.

(Although what 0.123 of a pixel looks like is beyond me).

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
0

Best answer might be to simply floor() the value so you end up with 114px in both cases. (Chrome rounds down the sub-pixel amount)

Chris G.
  • 3,963
  • 2
  • 21
  • 40
  • The OP might *want* the decimal places. – Blender Sep 28 '11 at 15:24
  • Well, Chrome rounds them down. We don't have screens that render at the sub-pixel level yet, so the decimals are useless. – Chris G. Sep 28 '11 at 15:25
  • No, I disagree. Try playing with `font-size` on Firefox. – Blender Sep 28 '11 at 15:26
  • Typography sizing is entirely different. Read http://style.cleverchimp.com/font_size_intervals/altintervals.html for more on font rendering. – Chris G. Sep 28 '11 at 15:28
  • My point is that Chrome doesn't support sub-pixel values to be stored at all, yet sub-pixel values do make a difference. BTW, I don't seem to see how that article is relevant... – Blender Sep 28 '11 at 15:31
  • Expressing a font size in pixels is completely different than expressing a div in pixels. Font size pixels are not in a relationship to on-screen pixels like a div would be. Sub pixel values only make a difference if you are expressing a decimal value as a PERCENTAGE of something else. (Like a font, or `width: 30.5%`) In the latter case, it would simply become `315px` as computed by the browser. – Chris G. Sep 28 '11 at 15:33
  • Yes of course it works. It gets scaled as a percentage. Your screen is not, however, magically rendering at a higher ppi. Either way, I'm not sure what your point is. Expressing font size as a decimal pixel is a travesty. – Chris G. Sep 28 '11 at 16:23
0

As long as you keep the width a decimal, Chrome will truncate it. If you make it a percentage, though, (might not be an option for you), Chrome will keep it the way it is.

This might not be what you're looking for, but you can store the pixel value in the jQuery object:

$('#foo').data('actualTop', 114.123);

But why do those decimal places bother you?

Blender
  • 289,723
  • 53
  • 439
  • 496