Skip to content

Conversation

@therealfrauholle
Copy link

I encountered a weird bug during SSR hydration on the client. I discovered the cause to be Math.cos within lat2tile not yielding the same results on the server and in my browser, a difference not bigger than floating point imprecision.

It appears the issue is related to the problem described here: https://stackoverflow.com/questions/26570626/math-log2-precision-has-changed-in-chrome

Without these changes, the following mismatched diff causes the hydration error.

+ position: "absolute"
- position: "absolute"
+ transform: "translate(6.019125609257912px, -138.1003211141433px)"
- transform: "translate(6.01913px, -138.1px)"
+ filter: ""
+ pointerEvents: "none"
+ cursor: "pointer"
- cursor: "pointer"
+ color: "black"
- color: "black"
+ transition: "color 0.2s linear"
- pointer-events: "none"
- transition-duration: "0.2s"
- transition-timing-function: "linear"
- transition-delay: "0s"
- transition-property: "color"

Note how the diff indicates that the transition property also indicates a problem (explicit vs. compact definition), but NextJS is actually able to understand that there is no issue in this case; the problem is solely caused by the arguably different transform values. This is why I believe this might be relevant for #168.

I also did some dogfood while I was on it, let me know what you think! And thank you for this awesome library 🚀

Node version: 20.18.1
React version: 19.0.0
NextJS version: 15.1.6
Client browser: Chrome 132

@therealfrauholle therealfrauholle changed the title Rounded position and dogfood SSR: tolerate floating point imprecision Feb 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant