Image Compare node: Even when the same input image is used for comparison, there is still pixel offset in the comparison result.

[comfyui-wiki]

Prerequisites

• I am running the latest version of ComfyUI
• I have searched existing issues to make sure this isn't a duplicate
• I have tested with all custom nodes disabled (see how)

What happened?

Steps to Reproduce

Just use same image as input to compare

How is this affecting you?

Visual/UI issue only

ComfyUI Frontend Version

1.37.6

Browser

Chrome/Chromium

Console Errors

Logs

Additional Context

No response

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

🔗 Related PRs

#7178 - fix: vue nodes image preview widget, better multi image gallery support [merged]
#7394 - fix: work around Chrome GPU bug causing severe lag when dragging links [merged]
#7538 - feat: add ImageCompare node [merged]
#7627 - Fix buttons displayed behind images in litegraph [merged]
#7868 - fix: prevent image preview resize issues when switching to vueNodes mode [merged]

---

Enable issue planning

_{To enable issue planning, add the following to your .coderabbit.yaml:}

issue_enrichment:
  planning:
    enabled: true

_{You can then request a plan by commenting @coderabbitai plan on any issue.}

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[dosubot]

This pixel offset is caused by how the Image Compare widget renders and aligns images: both images use the CSS class object-contain, which scales them to fit the container while preserving aspect ratio. The "before" image is absolutely positioned and clipped for the slider effect, while the "after" image is the background. If the container's aspect ratio doesn't exactly match the image, or if there's any rounding in scaling, you can get a visible offset—even when comparing the same image. This is a frontend/UI rendering quirk, not a backend or node logic issue. There are currently no configuration options to adjust alignment or scaling in the widget itself, and this behavior is consistent with the current implementation and tests see source.

You can experiment with overriding the CSS for these images (for example, try object-fit: fill instead of object-contain, or ensure the container matches your image's aspect ratio exactly) to see if that reduces the offset. Also, check if the issue appears in other browsers, as some rendering quirks can be browser-specific.

If you need pixel-perfect comparison, a custom widget or patch to the current one (removing object-contain or synchronizing the overlay/background scaling) would be required.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}