Bug 148584 - Miscalculated Viewport Width and Height (vw/vh) inside iframe
Summary: Miscalculated Viewport Width and Height (vw/vh) inside iframe
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: WebKit Nightly Build
Hardware: iPhone / iPad All
: P2 Major
Assignee: Nobody
URL:
Keywords: HTML5
Depends on:
Blocks:
 
Reported: 2015-08-28 13:09 PDT by Marvin Danig
Modified: 2020-07-28 07:30 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Marvin Danig 2015-08-28 13:09:38 PDT 
Hello,

I've the nightly build on my iPad and an older version of iOS too, so I'm assuming this bug has been there for long (Thus the risk of repeating the issue, but I didn't find it). 

Seems like `vw` and `vh` units are miscalculated inside of an iframe each time you change the orientation of the device. Happens both on iPhone & iPad.  

Here's the test case and it's <a href="https://bubbl.in/book/official-handbook-by-marvin-danig/4">live demo</a>:

HTML: 

Inside 
<iframe>

  <head> 
    // style here.
  </head>

  <body>
    <div class="leaf">
      <div class="inner">
        <blockquote>
          “To teach how to live without certainty, and yet without being paralyzed by hesitation, is perhaps the chief thing that philosophy, in our age, can still do for those who study it.”

          <div class="right">
            <p>- Bertrand Russell, </p>
            <cite>
              <a href="https://archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt">A History of Western Philosophy</a>
          </cite>
          </div>

        </blockquote>


      </div>
    </div>
  </body>
</iframe>

CSS:

@import url(//fonts.googleapis.com/css?family=EB+Garamond);
body {
  margin: 0 0;
  overflow: hidden;
  color: #fff;
  font-size: 3.5vw;
  font-family: 'EB Garamond', serif;
  background-image: url(//raw.githubusercontent.com/bubblin/Official-Handbook/master/images/bertrand-page-5.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
}

.inner {
  width: 70vw;
  float: right;
  padding: 3vw;
}

cite {
  font-style: oblique;
  font-size: 3vw;
}

.right {
  float: right;
}

a {
  color: #00ffaa;
  outline: 0 none;
  text-decoration: none;
  text-rendering: optimizelegibility;
}

a:focus,
a:active,
a:hover {
  outline: 0 none;
  text-shadow: 0 0 2px #0cf;
}

a:active {
  padding-top: 2px;
}

Now if you change the orientation of the screen it appears that iOS continues to calculate the vw/vh even after rendering the oversized context. Or it calculates the viewport width and height before the iframe itself is given its final reoriented size.
Comment 1 Marvin Danig 2015-09-15 13:27:11 PDT 
URL of the test/live case is here now: 

https://bubbl.in/book/official-handbook-by-marvin-danig/2

Apologies..:(
Comment 2 Simon Fraser (smfr) 2020-07-27 20:16:52 PDT 
Does this still reproduce in iOS 13 or iOS 14?
Comment 3 Marvin Danig 2020-07-28 07:30:21 PDT 
No, it's fixed. Thank you Simon Fraser. :-)