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.
Has anyone else come across this..?
Thanks
Adam
Hi there, i have also encountered this problem several times....
Hey @Nightmare and @turps808, thanks for bringing this to our attention 
To help us troubleshoot this can you share your
1) Operating System
2) Browser
3) Retool Version
Please let us know!
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
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)
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?
@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.
More details why exactly this happens has been described by the user "Fly higher" in this thread:
https://developpaper.com/question/why-does-the-use-of-css3-translate3d-result-in-blurred-display/
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!
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
Hm has the Retool team registered this problem?
Shouldn't these problems also occur for other Retool users?
It is really an urgent matter for my users, as working with the blurred components is very unpleasant 
I can report that I'm experiencing the same issue in my apps.
Hi @Nightmare @terrwong @minijohn @turps808, I'm sorry that you're still facing this issue 
We want to get this fixed but we haven't been able to reproduce this issue on our and we don't have reports of this issue from other users. Can you share a detailed description of the setup in your apps that is leading to this blurriness to help us better try and narrow down the cause of this issue?
@terrywong can you share what Retool version, OS + version, and Browser + version you're encountering this issue on?
Hi,
you could try to reproduce that issue by the way i described it in one of my previous posts (Jan 11) by inspecting the table/list view components HTML code in the browser and manually setting the width, height or either of the translate3d() parameters to a floating point value. This should result in a blurry component view. I have also posted a link there which explains why this leads to the blurry effect and how this possibly could be solved! 
Same here.
OS - Monterey 12.1 (21C52)
Browser - Brave Version 1.34.81 Chromium: 97.0.4692.99 (Official Build) (arm64)
Retool - Cloud (not on premise)
Hi @vinnie, @Nightmare, @terrywong, @minijohn, @turps808, I've filed a detailed report of this bug.
This issue appears to only affect certain monitors and also depends on a number of factors, including the zoom level of your browser window, the placement of the container, the placement of the component within the container, and the sizing of the container.
@Nightmare, thank you for sharing the cause of this issue that you've identified. I suspect you're right that the non-integer values in the translate3d fucntion are causing (or at the very least contributing to) this issue.
I can't provide any sort of timeline for when we might be able to address this issue but I'll update this post with our progress towards shipping a fix. In the meantime, it might be worthwhile to attempt adjustments to the contributing factors (the zoom, container placement/sizing, component placement/sizing), similar to @minijohn's suggestion, to see if the blurriness can be reduced.
If you can share what monitor you're using and share any screenshots of the blurriness, that could help our engineering team to get a better idea of the scope of the problem.
Thank you all for your ongoing patience!
I experience the same problem. Also sometimes, moving the container fixes the problem inside the container. But not all the time and not to all locations. Once moving or resizing works and fixes the blur, it stays fixed even moving back to the original location, but only sometimes. Sometimes moving it back makes it blur again. It appears to be a quite random behavior.
Here some display and computer information, hope it helps:
It's a very poor experience to see all the blurred fields.
It's easy to repro: just use a non-retina external display.
The solution is provided above: don't use fractions in the final value of the transforms.
Given that this problem is severe and easy to fix, I'd love to see it addressed.
Thanks!
I'm also experiencing this problem on Mac/Chrome when using external monitor
Same problem happening here. Very frustrating 
)
