Retool Components Blurry Inside a Container? Here's the Fix

If your Retool components look blurry inside a container, you've likely spent time questioning your display settings, browser zoom level, or screen resolution — only to notice that dragging the same component outside the container makes it perfectly sharp again. This is a known rendering bug in Retool, and the root cause has nothing to do with your hardware. Here's what's actually going on and what you can do right now to fix it.

Why Do Retool Components Look Blurry Inside a Container?

The blur is caused by how Retool uses the CSS transform: translate3d() function to position components on the canvas. When the calculated pixel values passed to translate3d() are floating-point numbers (e.g., translate3d(10.5px, 24.3px, 0)), the browser is forced to render the element at a sub-pixel position. Most browsers handle sub-pixel rendering by anti-aliasing the element, which results in a noticeably blurry or soft appearance.

When you move the component outside the container, the position values happen to resolve to whole integers, and the blur disappears. This is purely a layout math issue — the component itself is fine. The same problem has been documented with ListViews, tables, and other components placed inside Container components.

Which Retool Versions and Environments Are Affected?

This issue has been reported across multiple Retool versions and operating systems, so it's not isolated to a single environment. Confirmed affected setups include:

• Retool Cloud and On-Premise — both are affected
• Retool versions 2.77.x, 2.79.x, and 2.82.x
• Windows 10 Pro with Chrome and Opera
• macOS Monterey with Chrome

The common thread is not the OS or browser — it's the sub-pixel translate3d value produced when a component is nested inside a Container. The container adds an offset to the component's position, and that offset is what introduces the fractional pixel value.

How to Fix Blurry Components in a Retool Container

There is no one-click fix inside Retool's UI today, but there are several practical workarounds depending on which component is affected.

Fix 1: Resize the Component to Fit the Container Grid

This is the most reliable workaround for table components inside containers. When a table's column widths or overall dimensions don't align cleanly to the container's grid, the translate offset ends up fractional. Resizing the table headers or the component itself until they snap to the container grid forces the position values to resolve to integers.

• Click into the Container and select your table or component.
• Drag the component's edges until it snaps cleanly to the container's grid lines.
• Resize column headers on tables to fit the container width exactly.
• Check if the blur clears — it usually does once the layout math resolves to whole numbers.

Fix 2: Adjust the Container's Size and Position

If resizing the inner component doesn't work, try adjusting the Container itself. Move or resize the container so that its top-left corner sits on a whole-number pixel boundary on the canvas. Even shifting it by 1px can be enough to push the child component's computed position from a float to an integer.

• Select the Container component on your canvas.
• In the right-hand panel, manually type in the X and Y position values and make sure they are whole numbers.
• Do the same for Width and Height.
• Re-check the child components for blur.

Fix 3: Use a ListView Workaround

For ListView components, the resize trick used for tables doesn't always apply. The most effective workaround here is to experiment with the overall canvas zoom level in Retool's editor. Setting the canvas to 100% zoom eliminates any additional scaling multiplier that can compound fractional pixel values. If you're building at a non-standard zoom, switch to 100% and verify whether the blur persists in the deployed (preview) app.

The Real Fix: What Retool Should Do

The correct long-term fix is for Retool to round translate3d values to the nearest integer before applying them. This is a well-known CSS rendering best practice. Using Math.round() on pixel offsets before passing them into translate3d() eliminates sub-pixel positioning entirely and costs nothing in visual fidelity at standard screen densities. If you're hitting this repeatedly, it's worth filing or upvoting this issue directly in the Retool community forum so the core team prioritizes the fix.

Quick Checklist: Debugging Blur in Retool Containers

• Confirm the blur disappears when the component is moved outside the container — if yes, this is the translate3d issue.
• Check that your Container position and size values are whole integers in the properties panel.
• For tables: resize column headers to fit the container width.
• For ListViews: test at 100% canvas zoom in both editor and preview.
• Try a different browser to rule out browser-specific sub-pixel rendering behavior.
• If on Retool On-Premise, check whether upgrading to the latest version resolves the issue, as Retool has been iterating on layout rendering.

Blurry components inside a Container are frustrating precisely because they look like a hardware or display problem when they're actually a layout math issue. Once you know to look at pixel alignment and translate3d float values, the fix becomes much more approachable. Snap your components to the grid, keep your container dimensions as whole numbers, and you'll sidestep this issue on most builds.