observablehq
SSR Hydration attribute mismatch on `transform` attribute
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.
I believe this is due to this offset https://github.com/observablehq/plot/blob/7d18179ef5c46db1dc0f463b9e4d0888766cc80d/src/style.js#L9
We should probably align its value to the most common use case (which is possibly the high rather than low DPI at this point?)
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.
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.
Ah, I can definitely feel the difference. So, is it possible to always add a 0.5 pixel offset regardless of the devicePixelRatio?