Rotating device to landscape and back gives wrong windowWidth after resizeCanvas #8121
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- p5.strands
- WebGL
- DevOps, Build process, Unit testing
- Internationalization (i18n)
- Friendly Errors
- Other (specify if possible)
p5.js version
1.11.10 and 2.0.5
Web browser and version
Chrome 140 (is OK in Firefox)
Operating system
Android
Steps to reproduce this
Steps:
- Run the code below in portrait orientation in Chrome Android. Observe e.g. windowWidth=392 clientWidth=392
- Rotate to landscape. Observe e.g. windowWidth=788 clientWidth=788
- Rotate back to portrait. Observe e.g. windowWidth=788 clientWidth=392
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.min.js"></script>
</head>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
<body>
<h1 id="h1"></h1>
<script>
function setup() {
createCanvas(windowWidth, windowHeight)
h1.textContent = `windowWidth=${windowWidth} clientWidth=${document.body.clientWidth}`
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight)
h1.textContent = `windowWidth=${windowWidth} clientWidth=${document.body.clientWidth}`
}
</script>
</body>
</html>