Incorrect Canvas Dimensions After Landscape-to-Portrait Orientation Change

Technical Support
1

I’ve observed a bug where the canvas element’s calculated height is significantly miscalculated when transitioning from landscape mode back to portrait mode, which subsequently causes all associated HTML UI elements to scale down incorrectly.

Steps to Reproduce

  1. Start Experience in Portrait Mode: The viewport starts at a typical portrait resolution (e.g., 375px wide x 667px high).

    • Expected Canvas State (Initial Portrait):

      HTML

      <canvas data-engine="three.js r172" style="display: block; touch-action: none; user-select: none; width: 375px; height: 667px;" width="750" height="1334"></canvas>

      (Note: width and height attributes are typically double the size of the style dimensions for retina/high-DPI displays, which is correct here.)

  2. Switch to Landscape Mode: Rotate the device. The dimensions correctly swap.

    • Expected Canvas State (After Portrait-to-Landscape):

      HTML

      <canvas data-engine="three.js r172" style="display: block; touch-action: none; user-select: none; width: 667px; height: 375px;" width="1334" height="750"></canvas>

      (This transition works as expected, swapping the width and height values.)

  3. Switch Back to Portrait Mode: Rotate the device back to the original orientation.

    • Observed Canvas State (After Landscape-to-Portrait):

      HTML

      <canvas data-engine="three.js r172" style="display: block; touch-action: none; user-select: none; width: 667px; height: 1187px;" width="1334" height="2374"></canvas>

When returning to portrait mode, The attribute dimensions (width="1334" and height="2374") are incorrectly calculated. Due to this, all my UI elements even which have 100vh of height just covers the top left half of screen only.

Please provide a solution or work around, as we have a app which we need to publish in couple of days, it is happening on Android Chrome browser.

2

Have you tried using dvh instead of vh in your CSS?