I have an external monitor plugged into my MacBook which has a larger screen than my laptop, therefore the top of my laptop screen is not the top of my external screen.
The display on the left is my laptop's display, and is labeled as Screen 2. On the right is my external display, and is labeled Screen 1.
When I print out window.screenTop on Screen 1 (external) when the browser window is maximized, I get 23 pixels. These 23 pixels are from my macOS toolbar.
However, when I run window.screenTop on Screen 2 (laptop) in another maximized browser window, I get 303 pixels. Rather than returning the distance from the top of the browser to the top of that screen, it gives me the distance from the top of the browser to the top of Screen 1 (external)!
Here's a screenshot which spans both displays to show the difference:
I would expect screenTop to return the distance above the browser window for the current screen, not across screens. This is causing issues for me because my use-case requires exact measurements of the screen in order to crop full-screen screenshots. Is there any way to fix this issue, or is there some alternative to figure out the size of screenTop?
window.screen.availTop also returns the same, incorrect value, and simply subtracting window.screen.availHeight from window.screen.height will give me the height of the macOS toolbar, but not the space above the browser. And subtracting window.outerHeight from window.screen.availHeight doesn't distinguish between space above and below the browser window.
This bug occurs on Chrome and Firefox, but not on Safari.