🐛 Breakpoints aren't getting applied on actual mobile devices
MarkLyck opened this issue · 17 comments
Hey, I've been building 2 applications with this tool (Love it)
Both are almost ready to go in production and I was just testing it on my actual devices (iPad, iPhone), and I noticed on neither device this library takes affect.
I'm using the following breakpoints throughout my application:
const { 'isMobile-': isMobileMinus } = useBreakpoint()
const { 'isSmall-': isSmallMinus } = useBreakpoint()
const { 'isTablet-': isTabletMinus } = useBreakpoint()
When looking at my app through a browser, and resizing the browser, or even going in the mobile mode. It works totally fine.
But when loading the webpage on my actual iPhone or iPad, it ignores the breakpoints :(
Any idea why this is happening?
I am using next.js. But while it does do SSR, I would expect the library to pick up when the client loads and update to the correct sizes right?
iPhone X simulated: (How it should look)
Screenshot from my actual iPhone 12 Pro. (what it actually looks like)
Any idea what's going on here?
I am using the BreakpointProvider and it's wrapping the entire application.
here is a link where you can reproduce the issue: https://formula-stocks-next-git-responsive2-lyck.vercel.app/
Hi, thank you for the detailed report. @pablohpsilva, you're using the hook with Next, did you experience anything similar? You're right it should "catch-up" after hydration.
I can repro this also, it's pretty interesting, window.innerWidth is reporting a wrong value sometimes. Can you please try with the following meta tag?
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">@wintercounter I tried adding that, but it still doesn't work.
Here's the link with the new meta tag: https://formula-stocks-next-git-responsive2-lyck.vercel.app/
Can you please create a minimal repro repo so I can test? Presonally I don't use Next at all, I winder what is your exact setup like.
@wintercounter thanks for the quick responses!
I'm trying to set up a minimal reproduceable project here: https://codesandbox.io/s/nextjs-w11ruse-breakpoint-iu4uu
But I am now running into a weird error (that I'm NOT seeing on my main project).
Cannot read property 'breakpoints' of undefined
Any idea what that's about?
When I comment out this line it renders fine:
const { isMobile } = useBreakpoint();
But with it in, I get the breakpoints error 🤔
If I solve this issue, I'd hope I can reproduce the problem in this minimal project that only has next.js and @w11r/use-breakpoint
Hello :)
I've tried to reproduce the issue and I have this repo: https://github.com/pablohpsilva/nextjs-usebreakpoint
Long story short, everything is working fine.
@pablohpsilva the gif you are showing is using a browser.
The problem (for me) only occurs on an actual mobile device like an iPhone (I've only seen the bug on iPhone).
Resizing the browser like your example above works perfectly fine for me as well.
I can only reproduce issues on an actual iPhone device (in Safari) Although I assume it can be reproduced in an iPhone simulator as well?
I can reproduce this easily in Chrome in mobile mode. I actually know what's the fix, we need an initial useEffect -> setState in the provider to trigger an update. My only concern is that it'll hurt initial performance, as effects are running only after first render. I'll try to do some perf tests tomorrow and release the fix.
@pablohpsilva The problem is the initial render. On server-side it renders with 1920 as SSR fallback, and it doesn't update on client-side during re-hydration.
@wintercounter Really happy you figured out what the issue is 🙏
Were you able to test it?
Sorry for the late reply, I didn't have time to deal with it until now. I released an rc, can you please try with that?
npm i @w11r/use-breakpoint@next
@wintercounter thanks for updating it :)
Sadly I don't see any change, and I can still reproduce the issue on both my iPhone and Chrome browser by refreshing the page
@wintercounter sorry for the late response!
I would love to do a pair programming session to see if we can figure this out 👍
@wintercounter hmm it looks like it's more of an issue with next.js and not so much this library.
I posted a more in depth StackOverflow question here after I discovered the output from use-breakpoint is accurate.
https://stackoverflow.com/questions/68701356/next-js-styles-doesnt-update-on-first-render
I still have no idea why next.js refuse to update the styles after the components render though 🤷♂️
I know this is an old ticket, but I happened to figure out why this doesn't work.
It's a mismatch between what's rendered on the server and the client.
next.js, gatsby and other SSR frameworks require that the rehydration happens by using a useEffect rather than on the initial render where it can be different between the client and server.
So it's not a problem with next.js, but rather that the useBreakpoint hook is incompatible with SSR frameworks.
To make it compatible it would have to have a default value, and then change that value after useEffect is run (not before)
The RC I previously released, and you tried was actually doing that, but you still reported it wasn't working, that's why I suggested a pair session, but I'm kinda "out-of-order" the last few months, sorry for that. If you're still interested, please reach me out by e-mail, and let's do it.