title: Why is iframe blank only with iOS?
body: <p>There is an html page that works correctly on any Windows and Android (shows content of iframe). Hosting by Github Pages. It <strong>works</strong> on iOS version <code>12.5.1</code>, but <strong>no</strong> on <code>14.6</code> (blank page on Chrome, Safari, Opera). Why?</p>
  <ul>
  <li>Tried <code>src</code> with <a href="https://en.wikipedia.org/wiki/Spotify" rel="nofollow noreferrer">wikipedia</a> - ok everything. The problem narrows down to a combination of iframe and <code>src</code> of apps script (that opens separately correctly)</li>
  <li>Assume that the problem was mixed <code>http/https</code> according to <a href="https://stackoverflow.com/a/45286695/5894542">post</a>. Just <code>http</code> was in style <code>http://www.w3.org/2000/svg</code>, I changed to <code>https</code> (even removed all styles). No effect.</li>
  <li>No log errors, just blank page. Seems like trying to load, but break and stop. I haven't ios device to debug. Feedback user.</li>
  </ul>
  <p>If you have iOS 14, can try open <a href="https://efremych.github.io/spotify-goofy/" rel="nofollow noreferrer">this site</a>. What you see blank page or access error?</p>
  <p>Error like the next is right. It tell about you haven't access.</p>
  <blockquote>
  <p>Refused to display 'accounts.google.com/…' in a frame because it set 'X-Frame-Options' to 'DENY</p>
  </blockquote>
  <p>If you sign in <a href="https://mail.google.com" rel="nofollow noreferrer">Google Account</a> and try again, will be error from Google Drive. I have all this on any platform in incognito mode. Don't pay attention to them.</p>
  <p><strong>Only</strong> interested in the case of a blank screen/stop loading like screenshot below</p>
  <h2>iOS 14.6</h2>
  <p><a href="https://i.stack.imgur.com/BdnRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BdnRz.png" alt="enter image description here" /></a></p>
  <h2>Windows</h2>
  <p><a href="https://i.stack.imgur.com/MmchW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MmchW.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;ru&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Goofy&lt;/title&gt;
      &lt;style&gt;
          html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;iframe src=&quot;https://script.google.com/macros/s/AKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT/exec&quot;&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Apps Script render page with <code>XFrameOptionsMode.ALLOWALL</code></p>
  <pre class="lang-js prettyprint-override"><code>function doGet() {
      return HtmlService.createHtmlOutputFromFile('launch.html')
               .addMetaTag('viewport', 'width=device-width, initial-scale=1')
               .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  }
  </code></pre>