Re: [csswg-drafts] [resize-observer] device-pixel-border-box size (#3554)

Sorry to butt in here but I just wanted to point out the HTML snipped above is probably not the best practice for a full window canvas. 

If you want a canvas to fill its container, in this case the `<body>` then you should set the canvas to `display: block`. Canvas defaults to `display: inline` which ends up adding extra space at the end as is the reason people often get a scrollbar and then they end up hacking around their mistake by adding overflow hidden etc...

As well if you're using 100% and you don't set the size of the body and html you won't get 100% height. [Example](https://jsfiddle.net/greggman/Lj8phk5b/)

These are 2 recommended ways to get a full page canvas

1. use **vw** an **vh**

```
<html>
<style>
body { margin: 0; }
#canvas { width: 100vw; height: 100vh; display: block; }
</style>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>
```

[Example](https://jsfiddle.net/greggman/7ux6jch1/)

This will give you a fullscreen canvas with no scrollbar on all desktop browsers. 

The problem comes in on mobile where you have to decide what you want full page to mean. Both Chrome and Safarai (and Firefox?) decided that to deal with browsers on mobile hiding and showing the address bar and/or other UI then 100vh = the size when the UI is at its smallest and 100% = the size actually displayed (smaller when UI is visible, larger when not)

To get that to work cross browsers you have to do this

```
<html>
<style>
html, body { height: 100%; }
body { margin: 0; }
#canvas { width: 100%; height: 100%; display: block; }
</style>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>
```

[Example](https://jsfiddle.net/greggman/q9zra5vu/)

Which is more correct depends on the use case. if the canvas is some background element over which content scrolls then you probably want 100vh. If the canvas is just supposed to fill the screen then you probably want 100%

-- 
GitHub Notification of comment by greggman
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3554#issuecomment-530712399 using your GitHub account

Received on Thursday, 12 September 2019 07:59:04 UTC