Firefox getComputedStyle returns "auto"

Question

This question has been asked before about the "height" and "width" properties but I found no working solution.

In Firefox, properties with the value auto return the used value, not the value auto.

However, window.getComputedStyle(element).getPropertyValue("top") returns "auto" instead of the pixel value. Does anybody know a workaround?

Firefox 42.0 on Ubuntu 15.04

Don't use the non-standard getComputedStyle? http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element — Domino, Nov 12 '15 at 18:29
Pretty standard in 2015, I would think. Firefox on Windows 7 returns `0px`. — Shikkediel, Nov 12 '15 at 18:33
@JacqueGoupil Thanks, `element.getBoundingClientRect()` was exactly what I was looking for. Didn't know that `getComputedStyle` is non-standard though. — , Nov 12 '15 at 19:09
Well, getComputedStyle is somewhat standard, but it doesn't return consistent values based on which browser you're using, especially for colors (hex, rgb components, name?) and dimensions once you start using percentages and the css `calc` function. It's worst when you've got scrollbars - some browsers include the scrollbar's width and some don't. You're better off with getBoundingClientRect. — Domino, Nov 12 '15 at 19:42
Bounding box is no longer a viable answer for all scenarios. getComputedStyle allows the return of psuedo element styles....somewhat. — , Apr 13 '18 at 22:22

score 0 · Accepted Answer · answered Nov 12 '15 at 19:10

Looks like your element has position: static. Any other type of positioning seems to be computed correctly. Here's a test for a static element:

document.getElementById('results').innerHTML = window.getComputedStyle(document.getElementById('element')).top;

#element {
  top : auto;
  }

<div id="element"></div>
<pre id="results"></pre>

Here's another one for position: relative:

document.getElementById('results').innerHTML = window.getComputedStyle(document.getElementById('element')).top;

#element {
  position: relative;
  top : auto;
  }

<div id="element"></div>
<pre id="results"></pre>

top should be a no op for static elements. So it might be better to use the Rect methods instead in that case.

This fix does not work in ie. Worth mentioning. Clever find though. — , Apr 13 '18 at 22:23

1 Answers1