Here are two seemingly identical pages, yet one has an odd left align/easing issue that I have no clue the origin of.
It seems to be based on browser width: above about 1750px wide it does not occur. I have mobile breakpoints starting at 991px with different designs and it does impact those smaller designs as well.
The page on the left is the original page I built, but when I noticed the issue I made a new, blank page and just copy/paste each section to the new page (shown on the right). The only difference in the pages (that I can see in the editor) is the one additional section I added with the red text in it. I copied the same page workflows over as well. Made no other changes to either page.
Yet, when you load the page on the left, the content shifts left and has an ease effect.
The curious thing is, in the original page, when I open a dialog sheet (by clicking any of the table cells), the page body corrects itself and is fine after closing the dialog. Opening the same dialog on the new page has no effect (which is good).
I’m not an animation person so sorry if this is an easy check/fix…but any idea what may be causing this?
Granted, I’ll just use the new page for production. But it would be good to figure out how this happened so I can prevent it in the future!
But things that could be cause this issue:
1- There might be an element in the bottom of the page that’s breaking the design with some overflow. (you need to check)
2- The problem could be in the lateral menu, somehow it could be focusing on another element as a first step and then it opens your lateral menu
3- Perhaps there’s a broken variable that’s tied to your open and close system
4- Perhaps you set up your break points wrongly and one of those 3 versions has this specific mistake
Hi, yes, totally understand the difficulty debugging this. Appreciate the starting points though!
It is especially odd since I manually copied each section over from the old to the new page…so theoretically any issue with an element should also show up on the new page. I’m not sure how to determine what ‘things’ exist on the old page that do not on the new one.
I went through an checked each of your suggestions, at least as much as I know how to. If there are additional checks or tools I can use to further investigate any of these, please let me know and I’ll keep digging. At this point I’m motivated to figure it out purely because its such an odd mystery to me and I’m sure I’ll learn something about weweb if I can solve it!
I copied over each section element from the old to the new page, so not sure how this could be it.
Reserve is the old page, Calendar the new one. I copied over at the ‘section’ level, one at a time.
I’m not entirely sure what this means. I do not think I’ve directly changed a breakpoint/did not think that was possible. Of course, it is possible I somehow did in the early stages of building the page, but where would I look for that? I was under the impression the breakpoints in weweb were fixed: we only get the 3 in the toggle at the top of the editor. In any case, I have not added any custom code or styling.
Since the new/copied page does not have this issue, I did not spend much time on it. I am keeping the old page (as a draft) and may circle back at a later date to see if I can find a cause. But for now I’m moving on to other areas of the app that still need building!
If anyone stumbles upon this thread and has ideas in the meantime, I’ll certainly give them a try and report back.
