Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Open
hyamero opened this issue Apr 12, 2022 · 14 comments
Open

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

hyamero opened this issue Apr 12, 2022 · 14 comments
Labels
bug Something isn't working

Comments

@hyamero
Copy link

hyamero commented Apr 12, 2022

  • 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:

image

Edge:

image

Relevant code:

<Html transform>
@hyamero hyamero added the bug Something isn't working label Apr 12, 2022
@wmurphyrd
Copy link

Also observable in the laptop example
image
image

@pierremouchan
Copy link

@wmurphyrd same here on latest chrome, any updates?

@wmurphyrd
Copy link

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
Copy link

pierremouchan commented May 7, 2022 •
edited
Loading

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

Firefox (broken)

CleanShot 2022-05-07 at 09 27 28

Chrome (blurry)

CleanShot 2022-05-07 at 09 28 02

@luroc
Copy link

luroc commented Jun 12, 2022

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

@kevin-martins
Copy link

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

@laffan
Copy link

laffan commented Jan 15, 2023

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
Copy link

Does anyone have a solution?

@IbrahimSam96
Copy link

Same here. Chrome shows not so clear markup

@leonsbuddydave
Copy link

leonsbuddydave commented May 5, 2023 •
edited
Loading

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
Copy link
Member

drcmda commented May 5, 2023

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

@cptSwing
Copy link

cptSwing commented May 5, 2023

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

@leonsbuddydave
Copy link

leonsbuddydave commented May 5, 2023 •
edited
Loading

@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:
textblur recording-no-styles

Styles applied:
textblur-recording-styles-applied

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

@cptSwing
Copy link

cptSwing commented May 5, 2023 •
edited
Loading

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?

@Summer-Lin Summer-Lin mentioned this issue Nov 2, 2023
Open
@giusepperaso giusepperaso mentioned this issue Nov 4, 2023
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests