As soon as the page scrolls somewhere, the function will not work properly.
See gif for example: https://i.imgur.com/kTgNwUn.gif
- Go to page
- Scroll down
- Load mw.viewport
- Select element that is clearly in viewport in Elements pane
- Write in console mw.viewport.isElementInViewport($0)
- See a very nice false false
Seems to me looking at the source that the implementation assumes that getBoundingClientRect gives you something like jquery's .offset when in reality that function already gives you the cooridnates relative to the viewport, not to the top of the page.
Here's an example implementation that works with getBoundingClientRect (only taking the height into account though): https://github.com/joakin/loot-ui/blob/master/lib/client/components/lazy-images/index.js#L41-L50
Found trying to remove MobileFrontend's specific version in favor of core's one. (https://gerrit.wikimedia.org/r/#/c/275876/)