SSR Hydration attribute mismatch on transform attribute

[Jannchie]

Hello,

I’m currently working on a Vue application using this project and am building SSR charts with Nuxt. Most things are functioning well, but I’ve encountered an issue with the transform attribute, where there is often a 0.5-pixel mismatch.

  - rendered on server: transform="translate(-9,6.5)"
  - expected on client: transform="translate(-8.5,7)"

I’m not sure why this is happening, but I did notice that the official documentation seems to have the same issue. For example, the following page reports a similar error: https://observablehq.com/plot/features/marks.

I’m not certain if the maintainers are aware of this issue. I hope it can be addressed and resolved. Thank you for your attention to this matter.

[Fil]

I believe this is due to this offset

plot/src/style.js

Line 9 in 7d18179

export const offset = (typeof window !== "undefined" ? window.devicePixelRatio > 1 : typeof it === "undefined") ? 0 : 0.5; // prettier-ignore

We should probably align its value to the most common use case (which is possibly the high rather than low DPI at this point?)

[Jannchie]

If we relax the condition slightly and change the check to >= 1, it would cover even more users.

However, I don’t quite understand why an offset is added specifically for low-resolution users. For users with <=2K monitors running the Windows system, a devicePixelRatio of 1.0 is a reasonable setting, and I believe such users are not in the minority.

[Fil]

The offset makes lines sharp, avoiding antialiasing. Without it, a black line of "1px" against a white background is rendered as two vertical lines of grey pixels, instead of 1 vertical line of black pixels.

[Jannchie]

Ah, I can definitely feel the difference. So, is it possible to always add a 0.5 pixel offset regardless of the devicePixelRatio?