[Webkit-unassigned] [Bug 148584] New: Miscalculated Viewport Width and Height (vw/vh) inside iframes

Fri Aug 28 13:09:38 PDT 2015

https://bugs.webkit.org/show_bug.cgi?id=148584

            Bug ID: 148584
           Summary: Miscalculated Viewport Width and Height (vw/vh) inside
                    iframes
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: iOS
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: HTML DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: marvin at marvindanig.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20150828/9995e49b/attachment.html>