<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body>
      <p>
        <div>
            <b><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - WebGL canvas resumes at incorrect size/scale"
   href="https://bugs.webkit.org/show_bug.cgi?id=154819#c3">Comment # 3</a>
              on <a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - WebGL canvas resumes at incorrect size/scale"
   href="https://bugs.webkit.org/show_bug.cgi?id=154819">bug 154819</a>
              from <span class="vcard"><a class="email" href="mailto:david+webkit&#64;limnu.com" title="David &lt;david+webkit&#64;limnu.com&gt;"> <span class="fn">David</span></a>
</span></b>
        <pre>Here's a much more minimal test case that reproduces this issue:

<a href="https://dl.dropboxusercontent.com/u/364079/2016-04-26-webkit/broken.html">https://dl.dropboxusercontent.com/u/364079/2016-04-26-webkit/broken.html</a>

Repro steps:

- Visit the URL on an affected device (I tested on an iPad Pro). If all is well, you should see an animated border on all 4 sides.
- Press the HOME button to close Safari.
- Press the Safari button again to re-open.
- Note the canvas resizes so that the top and left borders are larger, and the right and bottom borders are not visible.

This issue only occurs when trying to set the WebGL canvas to higher resolution for retina displays, e.g., setting the back buffer resolution to be higher than the CSS pixel resolution by modifying the canvas 'width' and 'height' attributes separately from the CSS style.width and style.height attributes.

My theory is that some code somewhere is assuming that setting the width and height attributes should affect the CSS layout, and my assumptions/understanding is that the CSS size and WebGL resolution sizes of a WebGL canvas should be independent and unaffected by each other.</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>