I have an issue on some of my pages, that things don’t load and display correctly when viewed in Safari. In chrome it seems to be working just fine.
Below is an example from one of the pages. On page load, a repeating group might not be showing, and some text might be skewed around. If I resize the page just slightly, it suddenly displays everything like it should be.
I made a Gif that shows some of the behaviour that occurs. When I resize, everything displays like it should. In this Gif, the unwanted behaviour is:
The repeating group below the first blue sub-header just shows partly the first row.
The text from the second blue sub-header isn’t displaying.
I don’t know if it’s related, but safari console has a few warnings about “page expects an ID”.
My default to troubleshoot display behavior is group sizes and settings, page sizes and settings, and any other potential elements “floating” around.
If even only as a proof of concept, I might adjust some group sizes to see if the behavior is affected in anyway.
Did you google that console error?
As a side note: If you’re on a paid plan, it’s always a good idea to write down the exact time you begin diagnosing so you can revert back in version control.
There are some hidden groups (layered on top of each other) that are shown/hidden based on different states, and I’ve had a suspicion that it might have something to do about it.
But I think its strange that it only occurs in Safari?
I don’t know - I’m probably too opinionated to be a web developer, but I don’t touch Safari with a ten foot pole
The first step is to mess around with the layout - delete a group or whatever. If it changes the behavior then you know it’s the layout. Once you know what it is, you can start focusing in on adjustments.
If it isn’t the layout, then you can start looking at other potential sources of the bug (such as that console error).
Another thing I forgot to mention is that the behaviour isn’t consistent.
If i reload the page in safari, sometimes it displays correctly, sometimes not. Seems like on the first load it renders incorrectly, and next time it might render the way it should.
Safari is a bit of a bear, unfortunately. That’s probably not a Bubble thing, just a reality thing. Every tech company I’ve ever worked at has 2 hated browsers, and Safari is one of them. I’ll let you guess what the other one is
Hehe
Well, it’s enough of an issue if my users on Safari experience this.
Guess I’ll just have to play with the groups/responsive settings and see if there is a change.
Having exact same issue with Safari, with everything working just fine with Chrome. @pnodseth, any success so far for you after playing with sizes and groups, please?
Tried to play around with responsive settings and sizes of the elements, but it did not help.
Maybe it has something to do with the way the page is structured (multiple groups that are being hidden or made visible based on the user choices), because on simpler pages Safari seems to be running just fine.
Ok an update:
It was mainly one “container group” that caused this unpredictable behaviour.
So I tried creating a new container group and pasting in all the sub groups from the original container.
I’ve tested it a few times now, and it seems to have fixed that particular problem.
We saw sometime strange things like that one. I suspect some ‘hidden’ code that hasn’t be removed (when moving or erasing an object). After recreating the object, it always work. Some time consuming, but at that point very acceptable.
