title: Fixed element out of screen on mobile
body: <p>I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript). Iframe should be placed in bottom right corner. I can only control the style of an iframe.</p>
  
  <p>I have created following demo page which demonstrates the problem in test host page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;title&gt;Hello world!&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p id="greeting" style="width:1000px"&gt;Loading...&lt;/p&gt;
           &lt;iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On desktop browser this code works fine, but on (some) mobile devices the iframe is not visible on the screen. If I try to highlight an element its placed on gray area.</p>
  
  <p>Why is happening this and how can I style an iframe so that will be placed on bottom right corner?</p>
  
  <p>Edit: this is a screenshot from Galaxy S3 emulation (Chrome). Iframe is invisible in gray area. I think its the same on physical Nexus 5X device.</p>
  
  <p><a href="https://i.stack.imgur.com/d4sGz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d4sGz.png" alt="enter image description here"></a></p>
  
  <p>Many thanks!</p>