Resolve sub-pixel rendering issues

Learn how to fix 1px line differences in Percy snapshots caused by sub-pixel rendering.

Browsers cause sub-pixel rendering when they round fractional pixel values differently, causing minor visual inconsistencies in your Percy snapshots.

What causes 1px line differences in Percy snapshots?

Sub-pixel rendering causes the 1px discrepancies in your snapshots. When your CSS or JavaScript calculates element dimensions or spacing as floating-point numbers (for example, 356.324px), browsers cannot render a fraction of a physical pixel. Different browsers use different rounding algorithms, some round up (Math.ceil) while others round down (Math.floor), resulting in 1px shifts in your snapshots.

How does sub-pixel rendering work?

Browsers handle fractional pixel values by rounding them to whole numbers. Since different browsers or even the same browser at different zoom levels may use different rounding methods, this creates inconsistencies in how elements render. For example, an element with a computed height of 356.324px might render as 356px in one browser and 357px in another.

How can you fix sub-pixel rendering issues?

You can resolve sub-pixel rendering issues using one of these approaches:

1. Clean up source calculations (recommended):

Review the logic used to calculate heights, widths, and padding in your CSS or JavaScript. Modify these calculations to ensure values are always integers (whole pixels). This eliminates rounding ambiguity at the source.

2. Use domTransformation in Percy:

If you cannot modify the source code, use the domTransformation option in your percySnapshot command to programmatically round down problematic elements before capturing the snapshot:

Need more support? Contact BrowserStack.

Reference Topic

• Percy Common - FAQs