Html component render blurry when using transform attribute on firefox #859

hyamero · 2022-04-12T04:51:10Z

three version: 0.139.2
@react-three/fiber version: 8.0.10
@react-three/drei version: 9.4.2
node version: 16.13.2
yarn version: 1.22.17
Firefox Developer Edition version: 100.0b4 (64-bit)

Problem description:

Elements placed into the <Html> component render blurry when using the transform attribute.

Firefox:

Edge:

Relevant code:

<Html transform>

The text was updated successfully, but these errors were encountered:

wmurphyrd · 2022-05-02T02:33:20Z

Also observable in the laptop example

pierremouchan · 2022-05-06T19:54:51Z

@wmurphyrd same here on latest chrome, any updates?

wmurphyrd · 2022-05-07T00:15:14Z

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

pierremouchan · 2022-05-07T07:28:14Z

Still having issues on the drei docs + on my current project
Firefox looks completely broken and chrome blurry

Firefox (broken)

Chrome (blurry)

luroc · 2022-06-12T14:45:53Z

I just updated from Firefox 99 to Firefox 101 and that fixed the issue for me.

kevin-martins · 2022-12-14T23:28:22Z

Hi,
same here on input field, HTML component got blur and I don't know why

laffan · 2023-01-15T19:08:29Z

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.)

trofimenk0 · 2023-01-24T20:14:47Z

Does anyone have a solution?

IbrahimSam96 · 2023-02-20T11:34:04Z

Same here. Chrome shows not so clear markup

leonsbuddydave · 2023-05-05T07:03:25Z

Hi, same here on input field, HTML component got blur and I don't know why

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:

input {
    caret-color: transparent;
    outline: 0;
}

One or the other on its own doesn't work, not sure why yet.

drcmda · 2023-05-05T07:42:57Z

thanks @leonsbuddydave this finally worked. does this work for non input as well? can we add this to the outer drei/html div?

cptSwing · 2023-05-05T15:28:14Z

(It doesn't here, unfortunately --> Chrome)

leonsbuddydave · 2023-05-05T16:18:25Z

@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.

No styles applied:

Styles applied:

EDIT: Forgot to mention, this is on Chrome latest (112.0.5615.137) on an M1 Mac

cptSwing · 2023-05-05T16:44:19Z

I've fixed the very blurry rendering by applying this to the HTML's wrapperClass:

.html-component-blurriness-hack {
    zoom: 2;
    scale: 0.5;
    transform-origin: top left;
}

EDIT: zoom is only safely supported on Chrome and IE and will always fail on Firefox, to my understanding. Too bad.

Another fix:

<Html scale={0.5}>
    <div style={ { transform: 'scale(2)' } } />
</Html>

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?
(see also discussion at three's github: mrdoob/three.js#17641 (comment))

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?

github-actions · 2024-10-30T19:36:00Z

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

github-actions · 2024-11-07T08:42:20Z

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!

hyamero added the bug Something isn't working label Apr 12, 2022

Summer-Lin mentioned this issue Nov 2, 2023

Use Html and the font is blurs when the camera is close #1700

Closed

giusepperaso mentioned this issue Nov 4, 2023

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

Merged

1 task

github-actions bot added the Stale Inactive issue label Oct 30, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Html component render blurry when using transform attribute on firefox #859

Html component render blurry when using transform attribute on firefox #859

hyamero commented Apr 12, 2022

wmurphyrd commented May 2, 2022

pierremouchan commented May 6, 2022

wmurphyrd commented May 7, 2022

pierremouchan commented May 7, 2022 •

edited

Loading

luroc commented Jun 12, 2022

kevin-martins commented Dec 14, 2022

laffan commented Jan 15, 2023

trofimenk0 commented Jan 24, 2023

IbrahimSam96 commented Feb 20, 2023

leonsbuddydave commented May 5, 2023 •

edited

Loading

drcmda commented May 5, 2023

cptSwing commented May 5, 2023

leonsbuddydave commented May 5, 2023 •

edited

Loading

cptSwing commented May 5, 2023 •

edited

Loading

github-actions bot commented Oct 30, 2024

github-actions bot commented Nov 7, 2024

Html component render blurry when using transform attribute on firefox #859

Html component render blurry when using transform attribute on firefox #859

Comments

hyamero commented Apr 12, 2022

Problem description:

Firefox:

Edge:

Relevant code:

wmurphyrd commented May 2, 2022

pierremouchan commented May 6, 2022

wmurphyrd commented May 7, 2022

pierremouchan commented May 7, 2022 • edited Loading

Firefox (broken)

Chrome (blurry)

luroc commented Jun 12, 2022

kevin-martins commented Dec 14, 2022

laffan commented Jan 15, 2023

trofimenk0 commented Jan 24, 2023

IbrahimSam96 commented Feb 20, 2023

leonsbuddydave commented May 5, 2023 • edited Loading

drcmda commented May 5, 2023

cptSwing commented May 5, 2023

leonsbuddydave commented May 5, 2023 • edited Loading

cptSwing commented May 5, 2023 • edited Loading

github-actions bot commented Oct 30, 2024

github-actions bot commented Nov 7, 2024

pierremouchan commented May 7, 2022 •

edited

Loading

leonsbuddydave commented May 5, 2023 •

edited

Loading

leonsbuddydave commented May 5, 2023 •

edited

Loading

cptSwing commented May 5, 2023 •

edited

Loading