Fixed element covering entire viewport on mobile when page overflow - html

Question

I want to display fixed element covering entire viewport on mobile (chrome, webView). CSS is very simple:
.full {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
On desktop this works. But when I open it in mobile browser (or mobile mode in chrome), if underlying page overflows, it does not cover entire page. Here is jsfiddle (http://jsfiddle.net/ympasezw/12/) and here is it as standalone page (https://ghost.sk/overflow/). Open it in chrome, press Ctrl+Shift+I then turn on mobile mode (Ctrl+Shift+M in developer tools) it will cover 1/4 of page and when I pan page it doesn't stay in viewport.
I cannot "fix the page to not overflow" because this is a plugin on any site and I cannot change every site. Basically my plugin needs to show some info to user, but if the page is overflown and user is scrolled somewhere down and right, and when user activate my plugin, despite being fixed it is displayed somewhere completely outside viewport and user don't see anything.

Answer 1

This is really a problem with the table being unresponsive on mobile screens. However, you can get the desired effect by specifying right and bottom properties.
.full {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* height: 100vh; */
border: 1cm solid #f00;
box-sizing: border-box;
background-color: #00070080;
}