Display problems with hidden groups in Safari

Hi all.
I have a hidden group with tabs that is not visible on page load, but when current user has a special role - this group becomes visible.
And here is a screenshot with the same user logged in and having required role:


As you can see, tabs group is visible in Opera and Chrome. But in Safari it is not displayed.

What’s wrong with it?

Safari is being quite buggy these days, and doesn’t apply the size of the elements as it should

Can you try making the elements visible on page load and use conditions to hide them (it should be instantaneous, and with my testing it fixes the bug).

Hopefully they’ll fix that soon.

4 Likes

Yep, I’ve tried to flip conditions from “not visible on page load + show when user has role X” to “visible on page load + hide when user does not have role X” (hiding with WF or with conditions in an element). And now I can see tabs. This is good news.

Bad news is that I have two hidden groups: one for user with role X, the other for user without role X. So when I use “visible on page load + hide when user does not have role X” - both groups are loaded and it takes a second or two for bubble to hide redundant group.

May be anybody else has such a problem with hidden grous?
Safari has about 10% of browser market share, so we can’t ignore it :pensive:

Some users and us have reported the issue to Apple, we’re waiting for some news. If it takes too long we may try to find a workaround, but the browser’s behavior is clearly buggy, so may not be easy to work around their bugs.

It is a good idea to have some reserve workaround for such cases, because I think Apple is too large to be rapid with bug fixes :slight_smile:

P.S. Just updated my Safari browser from 10.0.2 to 10.0.3. Problem with hidden groups still exists.

hi Artyom!

Yep, here’s the thread that Emmanuel was referring to:

Let me try the conditional display settings to see if that helps.

I have interesting updates after making some experiments.

Login data (you need to log in to see hidden groups):
email: test@ya.ru
password: 123

Experiment #1
Two equal pages. Main group - is a hidden element that has some child elements (“tab groups” and one more group). If the user has special role (test user has it) - hidden groups should be displayed.
Everything is the same except button position:

And now just click between these two pages using buttons “go to Button OUT” and “go to Button IN”. When button is inside main group - all hidden tabs and groups are displayed correctly. When button is outside Safari makes it awful.

Experiment #2
I’ve made Page #3 (editor, preview). This is a copy of Page #2 (that is rendered with problems by Safari). And on Page #3 I’ve just changed conditions from role-based to login/logout-based:

  • if the user is logged in - Main group should be visible;
  • if the user is not logged in - Main group should be hidden.

And guess what? Safari displays hidden group without any problems in that case…

2 Likes

Emmanuel, this works, thank you.

If your hidden groups are not hidden on the page load and have the condition that will make them invisible that you can define to follow the logic of your flow, Safari renders them correctly.

@artemzheg, it worked for me, and your last example also proves the same thing.

Will post into the main thread about this workaround.

By the way, I never got any feedback from Safari team, not even an acknowledgement email :slight_smile:

1 Like

@vladlarin, in my last example Main Group is not visible on page load:


And it get’s visible only when condition “Current User is logged in” is true:

In that case (Page #3) I just made a copy Page #2 (that has problems with hidden group display) and the only thing I changed - conditions. On Page #2 the condition is based on a role, on Page #3 is based on user’s login status.

And about Emmanuel’s variant. It works, but there is a 1-2 second delay between page load and the moment when the group will be hidden. It is not very beautiful when user will be able to watch such page behaviour each time he goes to the page.

Maybe my groups are visually structured differently, but I did not experience the 1-2 seconds delay. (this sounds like way too much, by the way, can you give a link of an example of the app that works with this much delay for conditional settings?)

In my case - groups were loaded, and were not visible (due to conditional settings), and only revealed once the conditions were met, as expected.

I’ve made one more page with Emmanuel’s workaround: https://testinart.bubbleapps.io/version-test/hg_button_out_role_based2
When user test@ya.ru is not logged in - Main Groups and tabs should be visible. When user is logged in - Main Group and tabs should go away.

Here is a video how it looks like in my Safari: https://youtu.be/BFDlDn3hW0Y
P.S. I know that bubble has some performance issue now. But I tested that thing yesterday - same result.

I had similar issues yesterday and here is how I solved it. Testing Safari mobile and Mac.

  1. Took out rounded corners on groups where internal elements were close to the edges.
  2. Changed the relative position of internal elements relative to the edges of the group container.

I was able to replicate this to a point but it took trail and error. Hope this helps someone. :slight_smile:

Some more “magic”. I just added an element into Main Group and tabs became visible.
Example video: https://youtu.be/eHw403QRD-o
[00:00-00:13] Corrupted display of a hidden group in Safari
[00:14-00:19] Add a new text element to a hidden group
[00:20-00:37] long loading time, please, skip it
[00:38-00:47] Nice display of a hidden group

This topic was automatically closed after 14 days. New replies are no longer allowed.