2

This page http://orad.msbitsoftware.com/ tries to verticaly align the login form. When I try to get its top position via JavaScript, I get wrong result, which is the same as the chrome developer tool gets (see attached screenshot).

element's top position is wrong even in Chrome inspector

Can someone explain what causes this problem? How come even browser's native tools are affected? And is there a way to get the element's correct position via JavaScript?

Thanks.

Fczbkk
  • 1,477
  • 1
  • 11
  • 23
  • Most likely the browser isn't wrong, that is the actual position, you're likely not checking the correct element or something similar, but it's impossible for us to tell by looking at an image ? – adeneo Jun 12 '15 at 08:09
  • @adeneo I have checked positions of all parent elements up to HTML. They all have top position `0px` and have `position: relative`. You can open the page and check the element in the inspector yourself. – Fczbkk Jun 12 '15 at 08:11
  • What position dis you expect instead? – Valentin Waeselynck Jun 12 '15 at 08:15
  • My browser is telling me that `#loginPage` has a top position of `50%` set in login.css ? – adeneo Jun 12 '15 at 08:19
  • @ValentinWaeselynck I expected the real position of the element relative to the top-left corner of the document. In the screenshot, the real position of the element is around `0px`, but the inspector and JavaScript returns `215px`. If you make the window even smaller, the element's real position will be negative (above document's top edge), but it will still return positive position. – Fczbkk Jun 12 '15 at 08:19
  • You are getting the real position, `#loginPage` is always `50%` from the top of the parent section element – adeneo Jun 12 '15 at 08:20
  • @adeneo Yes. That's the CSS value. But I wonder, why is the *computed* value wrong? Also, how do I compute the correct value? – Fczbkk Jun 12 '15 at 08:22
  • I can almost guarantee you that the computed value isn't wrong, the browser is showing you exactly how many pixels it is, you're most likely just misunderstanding it ? – adeneo Jun 12 '15 at 08:23
  • @adeneo And I believe you. That's why I'm asking anybody to explain it to me. The calculated position says `210px` from top. My eyes see `~0px` from top. There has to be something that causes this disparity. And I'd like to know what it is. – Fczbkk Jun 12 '15 at 11:27

2 Answers2

1

It is a common way to center vertically an element of unknown height.

The top position is set to 50%, that makes the top of the element be at the center of the parent (this 50% relates to the parent height)

And the element is transformed with a vertical translation of 50%. This is related to the element height, and makes the element move vertically until it's center is at the center of the parent

top: 50%;
transform: translateY(-50%);

The top value that you get is prior to the transform. This is correct behaviour, but visually you see the transformed element.

Much better explained here Look at the -> vertically -> block level -> unknown height section

vals
  • 61,425
  • 11
  • 89
  • 138
0

If anybody is interested in how to retrieve element's real position via Javascript:

  1. Get element's left/top position within viewport using Element.getBoundingClientRect().
  2. Then get viewport's position relative to the document. This is a bit tricky if you want to support older versions of IE:

var viewport_left = (window.pageXOffset || document.documentElement.scrollLeft) - (document.documentElement.clientLeft || 0);

var viewport_top = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);

  1. Add element's left/top position to viewport's left/top position and you get the real position.

This works just fine in IE8+, even on elements using 2D or 3D CSS transforms.

Fczbkk
  • 1,477
  • 1
  • 11
  • 23