docs(Html): add details about the scaling of Html in transform mode (#…

…1702) * docs: give more info about the size of the Html component in transform mode Updates the part of the readme about the Html helper in transform mode: - explains how the size works - explains the possibility of a blurry rendering on some browsers and gives a possible workaround * docs: minor changes on the part about the scaling of Html
pmndrs · Nov 15, 2023 · b2fadaa · b2fadaa · vercel · Nov 15, 2023
1 parent 990eae1
commit b2fadaa
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -2371,6 +2371,16 @@ Enable shadows using the `castShadow` and `recieveShadow` prop.
 
 > Note: Html 'blending' mode only correctly occludes rectangular HTML elements by default. Use the `geometry` prop to swap the backing geometry to a custom one if your Html has a different shape.
 
+If transform mode is enabled, the dimensions of the rendered html will depend on the position relative to the camera, the camera fov and the distanceFactor. For example, an Html component placed at (0,0,0) and with a distanceFactor of 10, rendered inside a scene with a perspective camera positioned at (0,0,2.45) and a FOV of 75, will have the same dimensions as a "plain" html element like in [this example](https://codesandbox.io/s/drei-html-magic-number-6mzt6m). 
+
+A caveat of transform mode is that on some devices and browsers, the rendered html may appear blurry, as discussed in [#859](https://github.com/pmndrs/drei/issues/859). The issue can be at least mitigated by scaling down the Html parent and scaling up the html children:
+
+```jsx
+<Html transform scale={0.5}>
+  <div style={{ transform: "scale(2)" }}>Some text</div>
+</Html>
+```
+
 #### CycleRaycast
 
 ![](https://img.shields.io/badge/-Dom only-red)