[CSSOM] There is no way to get correct viewport position in relation to the screen

[ArkadiuszMichalski]

Hi, actually there is no way to get correct viewport position in relation to the screen (I mean whole screen). We have this properties:

https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth
https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

but the difference between window.outerHeight - window.innerHeight represents both toolbars (above and belove viewport). So I can't determine how many space the top bar takes up. This is especially noticeable when something like the status bar or devs tools appear at the bottom. For this reason, I am not able to determine the position of the element relative to the entire screen (equivalence for event.screenX and event.screenY).

Similar questions raised by the community:
https://stackoverflow.com/questions/37342914/how-to-find-the-absolute-the-coordinates-of-an-html-element
https://stackoverflow.com/questions/6107357/how-can-i-find-the-position-of-an-html-element-relative-to-the-entire-desktop-sc/29554744
https://stackoverflow.com/questions/13254070/how-do-i-get-the-viewport-position-relative-to-the-screen
https://stackoverflow.com/questions/55115381/how-to-get-absolute-position-of-an-element-relative-to-the-whole-screen
https://stackoverflow.com/questions/29369696/javascript-element-position-relative-to-screen
https://stackoverflow.com/questions/2337795/screen-coordinates-of-a-element-via-javascript
https://stackoverflow.com/questions/12057455/get-screenx-for-dom-element-in-javascript

The lack of such an option is made by intention? If not, one of the solutions below might fix the problem:

• add to window some new x/y cords that expose position viewport related to screen
• add to element some x/y cords that expose position related to screen (equivalence for event.screenX and event.screenY)
• add to window some properties that expose how much space each toolbars takes (I mean top, botoom, left and right toolbar) .

or any other that will solve the problem described here.

[muodov]

I've just come across the same exact problem today.

Some historical background I could find:

• You can actually do it in IE11 with window.screenTop and window.screenLeft. And they are different from screenY and screenX.
• Blink, Gecko and WebKit all define screenLeft and screenTop as aliases to screenX and screenY. I tracked down the implementation in Blink to this commit from 2007 and this commit from 2002. So this implementation is from pre-Blink era.
• According to various sources, this was initially implemented as a webcompat fix due to the popularity among developers. Although I don't understand how aliases actually helped, since in IE it works differently.
• The CSS spec standardized these aliases in [cssom-view] Window#screenLeft/screenTop #1091 (2018)

The problem that I'm trying to solve is basically this:

• Given a MouseEvent or a Touch inside a deeply nested iframe, I need to get its coordinates within the top-level context.
• The iframe is cross-origin, so I can't recursively calculate it using iframe's getBoundingRect(), without a chain of cumbersome postMessages.
• In my case I can also assume that there is no CSS transforms involved on any of those iframes.

So ideally I'd like to do mouseEvent.screenY - window.viewportScreenY, where viewportScreenY works like screenTop in IE 11.

[muodov]

Actually, I think this is the same request as #809, isn't it?

[ArkadiuszMichalski]

Actually, I think this is the same request as #809, isn't it?

I didn't notice it, it looks the same.

One more extra note to be aware of. Some browsers add an extra border around the window in a situation where, for example, the main window is not maximized (eg Chrome). To make it even funnier, the top edge is wider than the bottom / left / right !!!

This causes even more complications in the positioning of the elements because we also need to analyze various size of the main window. This is done on the feel anyway, because the size of the top or bottom edge cannot be determined properly.

[muodov]

It is tricky indeed. I suggest to close this ticket in favor of #809 then and continue discussion there.

Considering that no major browser except IE has implemented this yet, I wouldn't expect it to land soon, but let's keep an eye on it, and try to do what we can to push it.

[ArkadiuszMichalski]

Little later I will move my comments to #809 and close this bug.