I am looking to create a fixed element that covers the entire viewport on mobile devices (specifically Chrome and WebView). The CSS code I have is very straightforward:
.full {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
This works perfectly on desktop, but when I try it on a mobile browser or in mobile mode in Chrome, the element does not cover the entire page if the underlying content overflows. You can see an example on this jsfiddle (http://jsfiddle.net/ympasezw/12/) and as a standalone page here (). When you open it in Chrome, press Ctrl+Shift+I, then turn on mobile mode (Ctrl+Shift+M in developer tools), you'll notice that it only covers 1/4 of the page and doesn't stay in the viewport when panning.
The challenge is that I cannot control the overflow of the page since my code will be embedded as a plugin on various websites. This means that even if my plugin needs to display important information to the user, it might end up outside the visible area of the screen if the user has scrolled down or to the right due to overflowing content on the page.