Blurred components when added to a container

Support
#1

Hi there

When I add components to a container, they are very blurred. If I move the component out of the container then it sharpens up again. I have tried this on a number of devices, so I don't think that it is to do with monitors.

image
image1373×765 70 KB

Has anyone else come across this..?

Thanks

Adam

1 Like
#2

Hi there, i have also encountered this problem several times....

#3

Hey @Nightmare and @turps808, thanks for bringing this to our attention :slightly_smiling_face: To help us troubleshoot this can you share your

1) Operating System

2) Browser

3) Retool Version

Please let us know!

#4

Hi there. Thanks for looking into this. I am running:
OS: Windows 10 Pro 10.0.19043
Browser: Chrome Version 94.0.4606.81
Retool: Version 2.79.6

#5

Hey there,
My specs are:
OS: Win 10 Pro 10.0.19043.1288
Browser: Opera Version 80.0.4170.63
Retool: Version 2.77.17 (using On Premise)

#6

Hmmm, this isn't a very large sample size but the common denominator seems to be Windows 10 Pro 10.0.19043, have either of you tried updating to Windows 10.0.19044?

#7

@everett_smith I don't know what the problem should have to do with Windows, if the component is displayed correctly on one side and incorrectly on the other side of the canvas....

Since this problem has now occurred again several times with me I have tried to diagnose it. Interestingly, the sharpness changes depending on the position of the element in the canvas. After inspecting the HTML element of the retool preview page I think I found the problem. The translate3d function is used when rendering the components. The blur occurs when the function receives float values.
image

More details why exactly this happens has been described by the user "Fly higher" in this thread:

If I set the number in the function to an integer value the element is displayed sharp.

A possible fix on the side of Retool would be to round the value to an integer value.

I hope we get a quick answer to this problem. Thanks!

#8

Running into this as well. I figured out that if you resize the table headers to fit it's container it sharpens again.

OS: MacOS Monterey 12.1
Browser: Chrome (latest)
Retool: 2.82.33

#9

@minijohn This only works with tables, right?
For me the problem appears with ListViews as well...

#10

Correct @Nightmare, haven't noticed it in ListViews yet (probably because I rarely use them :stuck_out_tongue: )