-
Notifications
You must be signed in to change notification settings - Fork 664
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Html component render blurry when using transform attribute on firefox #859
Comments
@wmurphyrd same here on latest chrome, any updates? |
I opened my project in Firefox today and it the html components were rendering correctly. Don't know if it's because of the new version 100 or if this issue is intermittent |
I just updated from Firefox 99 to Firefox 101 and that fixed the issue for me. |
This is pretty hacky, but you can scale down the mesh, and then use a CSS transform to scale up the HTML like so : <mesh
geometry={nodes['node1'].geometry}
material={materials['material1']}
position={[0, 0, 0]}
scale={0.5}
>
<Html transform>
<div className="wrapper" onPointerDown={(e) => e.stopPropagation()}>
<div
style={{
transform: 'scale(2)',
transformOrigin: 'top left',
}}
>
<h1>This text used to be blurry.</h1>
</div>
</div>
</Html>
</mesh> Doesn't solve the underlying issue, but you get sharper text (and a slower scene.) |
Does anyone have a solution? |
Same here. Chrome shows not so clear markup |
This isn't necessarily a fix, but I had this same issue and found that it fixes the issue to set these styles on the input:
One or the other on its own doesn't work, not sure why yet. |
thanks @leonsbuddydave this finally worked. does this work for non input as well? can we add this to the outer drei/html div? |
(It doesn't here, unfortunately --> Chrome) |
@drcmda @cptSwing I did some more testing and got a couple recordings. For some reason setting the styles above (caret-color, outline) on just the input keeps the whole HTML object including parents and siblings looking crisp. There are no style changes between these two recordings other than the two style changes on the input. For me it's only happening when the input is focused with no text selected. Selecting the text in the box or clicking out of the input box makes it sharp again. EDIT: Forgot to mention, this is on Chrome latest (112.0.5615.137) on an M1 Mac |
I've fixed the very blurry rendering by applying this to the HTML's wrapperClass:
EDIT: zoom is only safely supported on Chrome and IE and will always fail on Firefox, to my understanding. Too bad. Another fix:
As far as I can tell, this will impact performance since the content of HTML is rendered as a texture in browsers and this will upsize-then-downscale the resulting texture? It also appears that as soon as one transforms again, the blockiness reappears, so YMMV @drcmda https://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ seems to suggest it's non-integer px values in the transforms? |
three
version: 0.139.2@react-three/fiber
version: 8.0.10@react-three/drei
version: 9.4.2node
version: 16.13.2yarn
version: 1.22.17Firefox Developer Edition
version: 100.0b4 (64-bit)Problem description:
Elements placed into the
<Html>
component render blurry when using thetransform
attribute.Firefox:
Edge:
Relevant code:
The text was updated successfully, but these errors were encountered: