measureInWindow inaccurate in Safari

[davepack]

The problem
Chrome/Firefox: node.scroll[Top|Left] when node is body is always 0, so window page[Y|X]Offset should be used in place of node.scroll[Top|Left] for only the body node.

Safari: measureInWindow is off by the sum of top and left borders of all parents.

How to reproduce
App here demonstrates the issue: https://rnw-measureinwindow.glitch.me/
Try it in Safari and Chrome/Firefox.

Code: https://glitch.com/edit/#!/rnw-measureinwindow?path=src/components/App/index.js

Steps to reproduce:

1. open glitch app
2. scroll through the two scroll views
3. click "come here square" buttons

Expected behavior
The blue square should cover the pink square completely to demonstrate that measureInWindow measured the pink square correctly.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.8.8
• React (version): 16.4
• Browser:
  • Safari 11.1.1
  • Chrome 67.0.3396.99
  • Firefox 61.0.1

I started a PR here: #955
Demo of this PR in use: http://davepack.com/rnw-scroll-measure-test/
Source for demo: https://github.com/davepack/rnw-scroll-measure-test/blob/master/src/App.js

I either need guidance and further understanding of edge cases that the getRect() function needs to meet, or somebody else needs to complete my work.

Thanks!

[necolas]

Note that body scrolling isn't supported at this time

[necolas]

I think this should be fixed by the patch above and will be in the 0.10 release.

[MoOx]

FYI, I used View measure method and it was working in Safari, but totally not in Chrome/Firefox (same origin of the bug).

I used this method to simply load something when it's appearing on screen (via a simple viewport observer component)

With the fix shipped (I am using 0.10.0-alpha.3), it's perfectly working as expected in all browsers. Thanks @necolas!