What's the difference between VisualViewport.offsetTop and VisualViewport.pageTop?

Question

Spec's here, https://wicg.github.io/visual-viewport/, but I can't understand the difference.

Aren't the "initial containing block origin" coordinates always the same as the layout viewport coordinates?

Thank you.

Answer 1

I bookmarked this post to take a look at it later if no one answers it, and here I am. I've just tested this API, and I can say that without zooming in VisualViewport.pageTop acts the same way as pageYOffset:

---

Next, VisualViewport.offsetTop remains 0 til you zoom in, and if you do it shows offset (made this example on my mobile device so it's more noticeable):

---

If you zoom in pageYOffset and VisualViewport.pageTop will be different and the difference equal to offset VisualViewport.offsetTop (here 2974 - 2869 = 105):

Resources about visual and layout viewports and other related things:

• Web Viewports Explainer
• A tale of two viewports — part one
• A tale of two viewports — part two