- From: Mr.doob via GitHub <sysbot+gh@w3.org>
- Date: Thu, 12 Nov 2020 12:21:56 +0000
- To: public-css-archive@w3.org
I thought I would give more background to this issue... Historically, many canvas/webgl projects configured the `canvas` element size like this: ```js canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` When `window.devicePixelRatio` was introduced, this pattern was used to render at the physical resolution: ```js canvas.width = window.innerWidth * window.devicePixelRatio; canvas.height = window.innerHeight * window.devicePixelRatio; canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; ``` This worked fine until devices started to use non-integer DPRs. In devices with DPRs such as 1.25, 2.75, ... we can end up with canvas elements that are bigger than the viewport (forcing the scrollbar to show up if the developer didn't set `overflow: hidden` ). I've made a demo to illustrate this: https://devicepixelratio.glitch.me/ The demo shows the (virtual) resolution provided by `innerWidth` and `innerHeight` and the computed physical resolution by taking dpr into account. I've also added an edge to edge canvas using that information and it draws a 1 pixel blue border inside: <img width="1074" alt="Screen Shot 2020-11-12 at 11 06 31 AM" src="https://user-images.githubusercontent.com/97088/98932385-9db60680-2522-11eb-8875-71451f05b42e.png"> Things break when DPRs aren't integers. For example, Google's PixelBook Go has a DPR of 1.25 and depending on the window size the canvas element is bigger than the viewport so the outline gets clipped:  Google's Pixel 4a has a DPR of 2.75 and we see the same issue. In this case we know that the device's physical resolution is 1080px width. If we divide 1080 by 2.75 we end up with 392.72px which would be the value of `window.innerWidth` if it was not an integer.  It's worth noting that this doesn't seem to be an issue on Mac/iOS devices because, [as far as I can see](https://www.netzkern.de/en/blog/apple-bildschirmaufloesungen), all the devices have integer DPRs (1.0, 2.0, 3.0). -- GitHub Notification of comment by mrdoob Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5260#issuecomment-726044922 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 12 November 2020 12:21:58 UTC