SOLVED: Flashing mobile menu on desktop and mobile

Bugs
1

Hi,
A small problem not serious but I find very unpleasant.
When you navigate on the site the mobile menu appears very briefly which creates a flash not very pleasant for the user, thus happen on desktop and also on mobile when you click a link on the page.
I guess it’s because of the CSS that hides the mobile menu that is not interpreted fast enough.
I use bricks with the CSS in external file.
I made a video where you can see the problem Loom | Free Screen & Video Recording Software | Loom
Someone also reported this in the facebook group Bricks Community | Facebook

Thanks.

2

Hi Laurent,
Thanks so much for your report!

Can you please recheck this with Bricks 1.5beta (on a staging or local site)? I’m not able to reproduce the issue anymore.

Best regards,
timmse

3

Hi,

I don’t think 1.5 will solve this issue.

Of course you can’t reproduce !

I think it is related the way you add the mobile menu with css.

It is very frustrating this behavior, i love bricks but this flashing is for me a problem…

You need to test with css bricks setting in file not inline

Thanks.

4

Hi by disabling CSS concatenation it seems better, will see.

5

Hi Laurent,
I’ll try to help you, but you’ll have to meet me halfway :wink:

Without any form of “optimizations” (which often cause more problems than they bring benefits):

Please let me know if you continue to have problems and possibly a way I can reproduce the problem in 10/10 cases.

Best regards,
timmse

6

Hey @timmse, first time using Bricks and the menu element on a development site. I am experiencing the same small “background flash“ on the mobile menu. Not a big deal but also not an ideal experience. Feel free to have a look and let me know how I can help to identify and solve the issue: https://hzm.ppr-essen.de/.

7

Hi,
Yes, this a problem for me, on all website made with bricks i have sometimes this flashing with mobile menu.

8

Hey @timmse,

I recorded a small screencast showing the mobile menu flashing problem (which might be a different one than the one that this thread is about – sorry in this case). There seems to be a problem with animating the z-indexes of the mobile menu and the mobile menu background overlay. Hard to explain exactly but I hope my video sheds some light. :slight_smile:

Quick update for a possible fix I did not show in the video:
The problem is fixed when the mobile menu (.bricks-mobile-menu-wrapper) gets a z-index of 999 by default and not just in its final (showing / active) state (instead of changing the z-index from -1 to 999 while animating).

2 Likes
10

Hi, this little bug is not solved yet @timmse @thomas

Thanks.

11

Sorry guys,
I missed the posts back then.

Thanks so much for providing me with the Video, Andre!
I think changing the transition properties works fine and is less obtrusive than changing the z-index, which might cause other issues on different sites :+1:

Laurent’s problem is different, but I still can’t reproduce it. Can you please show me your header settings @Laurent and provide me with a link where I can see the issue?

12

Hi @aslotta ,
We’ve fixed “your” bug in Bricks 1.7, but are still waiting for a response from @Laurent :thinking:

13

Hi, oups sorry for delay.

The problem appeared when we used the CSS in file and not inline but it seems that 1.7 solved the problem, for the moment I do not see it anymore.

THanks.

1 Like
14

Hi,

I’m experiencing this on a couple of websites, including: https://lawrence.ladomery.com

I’m running 1.8.6.

I tried using both inline CSS and as external files, but that didn’t make a difference.

I don’t see the issue when I am logged in.

15

Hi Lawrence,
Is it possible that you only see the problem when you have the Developer Tools open?

We are aware of the problem (but since it’s quite strange, we don’t have a solution for it yet), however, it shouldn’t be worth mentioning for regular site visitors, since no regular visitor opens Dev Tools and then navigates through your site :smiley:

16

I’m building my first site in Bricks and I’m seeing similar flashing problems.

The drop downs animate in briefly on page load, but also I think the skip to content button for screen readers? Which then goes nipping off the top of the screen.

I’m using the nestable nav, and just the bricks settings to add a small transition to the drop down

I can’t give a link out yet, but I’ll try to get a video

17

Here’s the flashing in and then disappearing of the dropdown on page load

drop down issue

18

Hi BrickieBoy,
Welcome to the forum!

Do you have a live link where I can see the problem? Is it possible that you only see the problem when you have the Developer Tools open?

1 Like
19

Thank you @timmse,

It’s still a dev site, so no live link. Although it seems to have stopped now, if it returns when live I’ll send you a link.

20

Hi, I’m experiencing the same problem too, even in the last version 1.8.6. Once a while when loading a page the mobile menu flashes even on the desktop. It uses the selected animation (fade or slide).

Somehow I dealed with it by setting it the zero width up until the mobile menu breakpoint, but it’s definitely just a workaround. I can send you a link, but it’s a site in the beginning of the dev process and everything is changing there right now, so I’m not sure if it would be too helpful.

21

Oh, now I have read all the comments, and it indeed seems that the issue is there only when using the dev tools (both in Chrome and Firefox). So it’s not a big deal for now…

1 Like