HTMLMESH is cropped when the aspect ratio is very small

Bugs
1

d292716ffb8c8592db9355419a1e8efe
d292716ffb8c8592db9355419a1e8efe597×624 9.17 KB

htmlmesh bug | Babylon.js Playground

2

image
image1910×947 82.1 KB

After using the mouse wheel to pull in the camera, it will be displayed, and if the camera is far away, it will be cropped

3

image
image1910×947 82.6 KB

4

This is a browser limitation related to GPU compositing layer size. When the aspect ratio is very extreme (like 0.5755 / 12.56 ≈ 0.046 in your PG), the HtmlMesh renderer creates an HTML content
element that’s ~21,800 pixels tall to maintain resolution. Browsers cap the size of GPU-backed compositing layers (typically 4096–16384px depending on hardware), and any content beyond that
limit is silently cropped.

This is why the bottom of the element disappears when the camera is far away or rotated — the browser simply can’t render an element that tall in a single compositing layer.

Unfortunately there’s no easy engine-level fix for this, since the HTML content must be rendered at its original CSS pixel dimensions (shrinking the element would distort all CSS properties
like font sizes, border radius, padding, etc.).

Workarounds:

  • Use a more moderate aspect ratio for your HtmlMesh (keep dimensions within roughly 10:1)
  • If you need a very tall/narrow panel, split it into multiple HtmlMesh instances stacked vertically
  • Reduce the content pixel density by using smaller width/height values in setContent(), accepting lower resolution
3 Likes