On a Mobile Phone, the Menu Bar Quickly Flashes the Links

[miamax]

On a mobile phone, the menu bar (under the header) flashes quickly, showing the links for a split second. This happens when the page is refreshed and also when any links from “Menu” are touched.

I asked AI about it and was told it was most likely that Weaver Xtreme javascript was the reason. I tried to implement AI suggestions but nothing worked.

Please take a look at my site on a mobile device, and either refresh the screen or click on a link  from “Menu” to see what I mean.

Is there a way to stop this from flashing?

http://www.dwellinthegarden.com

[scrambler]

Make sure to do 1 and 2 before trying 3.

1) First make sure you do not have any plugin that optimizes Javascript and or CSS. The theme already does that, and such plugin is likely to break the theme javascript and CSS causing all sort of problems, some you may not have noticed…

If you do have such a plugin, deactivate the plugin and see if that solves the issue. If it does and you need the plugin to optimize other things, then you should be able to exclude ALL theme files from the plugin, so it does not reoptimize the theme javascriopt and CSS.

2) If you are not sure if you have such a plugin, try temporarily deactivating ALL non weaver plugins and see if it solves the issue. If it does then reactivate them one by one and test in between to find out which plugin is at fault.

3) If none of that works, to confirm if something is delaying the javascript  or CSS creating the mobile styling to hide the standard menu and show the mobile one, try the following:

Add the rule below to the theme global custom CSS rule box and see if that corrects the issue. make sure not to make any syntax error.

@media (max-width:768px) {#menu-horizontal-under-header {display:none;}}

If it does not make a difference, leave the rule in and post back so we can check if the rule is active or not.

If it fixes the issue, and there are no other similar issues, you could leave it and be done. If there are more similar issues, we may need to remove the rule and ask @weaver to have a look to see if he can see what is causing the abnormal delay in the CSS or js of the theme

[miamax]

I deactivated all plugins and the problem is still there.

I added the rule to global custom CSS and that did not solve the problem. I left the rule in.

But now the “Menu” link does not work. Touching it does nothing.

[scrambler]

From my side it does solve the problem as I cant see the menu flash any more, so I believe something is causing a delay in the execution of the theme CSS/JS.

But it does make the link not work for a reason I cannot determine. So go ahead and delete the rule I gave you

Be careful, you are missing a closing curly bracket in your @media rule just above the one you added for me (which caused the one I gave you to be embedded in yours…).

So pay attention to the syntax when you remove the one I gave you and make sure to correct as below.

Your last rule was

@media only screen and (max-width: 768px) {

#branding img {
content:url(“https://www.dwellinthegarden.com/wp-content/uploads/dwell-header-mobile1.png”);
width: 100% !important;
height: auto !important
}

.clear-preheader {
display: none !important
}

When it should be

@media only screen and (max-width: 768px) {

#branding img {
content:url(“https://www.dwellinthegarden.com/wp-content/uploads/dwell-header-mobile1.png”);
width: 100% !important;
height: auto !important
}

.clear-preheader {
display: none !important
}

}

Given you added Custom CSS, you may also want to test temporarily removing your custom CSS to see if it makes a difference.

After that, you can post back and may be @weaver can have a look if he sees what is causing the delay in the javascript / css

Also, if you have added Scripts to your website, you may want to test removing them to see if they may be causing the delay. If they do, you may need to load them at a different place in the page.

For example, personal scripts loaded early on could delay the ones from weaver

[Weaver]

Not sure if it is related (I haven’t looked on a phone yet), but if you squeeze the screen down from a desktop browser, there is the Menu link on the far left with no margin, and it does nothing – no sub-menus – could  be related. Note that the search button still works.

[scrambler]

@weaver, you are seeing it with the rule I told him to try.

You will have to wait until he removes it

[miamax]

I fixed the syntax.

I removed the rule.

I removed all custom CSS. Tested, then added it back.

The result is the same. “Menu” does nothing. The flash is still there. Although the links are gone, the menu bar still flashes.

[User]

Yes, that “flash” is actually the full desktop version of the menu rendering and then closing and the mobile version then rendering.

However, the word “Menu” on the mobile version is working for me, and it correctly displays the “Your Entryway | Instant Download Bible Games | Christmas Ornaments” links.

Also now I am seeing 1 error message in the Console, which was not there before.

[scrambler]

The menu link is working for me too, so @miamax you may have had a cached version when you tested.

@weaver, the problem is now back. When the page loads on mobile (or when you refresh it), the desktop menu is briefly displayed before being hidden by the mobile rule

@miamax, The Desktop menu becomes hidden on mobile (under 768px wide) because a weaver script adds some mobile classes to it and then CSS applied to these classes hide it and change its formatting.

The fact that we briefly see the desktop menu is likely because there is a small delay in the execution of that script.

May be @weaver can figure out what on your site is causing this delay.

And as @user mentioned, it appears there is now an issue with the header image loading on mobile, Causing the error below

/%E2%80%9Chttps:/www.dwellinthegarden.com/wp-content/uploads/dwell-header-mobile1.png”:1 Failed to load resource: the server responded with a status of 404 ()

[miamax]

I believe I fixed the header image, please check.

Also, I do see the dropdown menu now when “Menu” is touched.

I still see the quick flash of links.

User, I think you are right about the full desktop version of the menu rendering and then closing and the mobile version then rendering. And there is a teeny delay which then shows the links for a brief moment.

I hope there is a solution to this happening on my mobile site.

[miamax]

I just read somewhere that it is a Javascript loading issue. Perhaps this cannot be corrected?

 

[Weaver]

Right now, on my iPhone with Apple Safari, I’m not really seeing any artifacts. When I click Menu, it flashes the background color, which is likely intentional to indicate the press, and the submenu instantly pops up. On first view, there was a privacy dialog that popped up that wasn’t perfectly smooth, but fast, and only once. Not sure what more there is to say – looks just fine to me.

Chrome on the iPhone works fine. However, Firefox does not work well – flashes and no header image on your site, and on weavertheme.com.

I may try to figure that one out – but for me, the menu flash is just not apparent. – Apparently old version of firefox on my iphone.

[scrambler]

@weaver, here is a way I can see it in Chrome on desktop

Shrink the browser width until the mobile menu shows up

Then refresh the page, and you can see the desktop menu (all on one line) flash before the mobile one is on

[Weaver]

I can see that on that website the Chrome  desktop, but never on an actual phone.

I am slightly suspicious of the “Menu” label itself. The wording for that is in the options, but whatever is entered there will show up with a bit of left margin instead of slightly going off the left side.

So, my question is what has been done to cram that too far left? Perhaps there is some issue there?

[scrambler]

@weaver He has some CSS that messes with the full width rules, but I dont see that causing an issue.

@miamax, can you try to temporarily remove ALL your custom CSS to see if that makes a difference. If it does we can dig into it

This really feel like a delay in the javascript that adds the is-mobile CSS class on the desktop menu so it hides.

But why is the delay bigger on his site, not sure

[miamax]

This reply has been marked as private.

[Author]

Posts