[Resolved] Problems with Mobile View in Firefox Quantum

[Roman]

Hello Tom,

I’m still really very excited about your GeneratePress theme, I love it.

Some time ago, I opened our website with the then unpublished Firefox Quantum and noticed an error in the view. At first I thought this error would disappear with the finished version of the browser; This is unfortunately not the case.

When I visit our website, the first view displays a mix of mobile and desktop view. For example: It will not show the mobile menu, but the desktop menu. The sidebar is displayed, but should not. Only when someone scrolls down the page a little bit, the error disappears and the page looks as it should.

The error has not occurred in any other browser yet. However, the error does not occur on other sites with GeneratePress theme, e.g. not on https://generatepress.com.
I have created a summary with the error as a PDF, so I do not have to post all images in the forum. The link to the website is also indicated, you can find it here: Dropbox-Download

What could that be?
Many thanks in advance!

[Tom]

Strange, it’s like it’s ignoring CSS media queries.

Doesn’t look like it affects the mobile header.

I’ll take a look, but I’m assuming it’s a Quantum bug as it’s still quite new.

[Roman]

Many thanks in advance for that!

As information may be helpful: I use a child-theme generatepress_child. But the only media queries from there are:

@media (max-width: 1024px) {
.custom-mobile-background {
background-image: url(the-url-to-picture.jpg) !important;
}
}

as well as

@media (max-width: 768px) { ...

Let’s hope it’s a bug in FF Quantum that gets fixed quickly. 🙂

[Tom]

I just checked and it’s happening on our demo site as well.

I noticed it stops happening once I disable Autoptimize. Are you using it as well by chance?

[Roman]

Yes that’s true! I also use Autoptimize in combination with Async JavaScript (Clough I.T. Solutions).

In Autoptimize the following options are set to true:
Optimize HTML-Code [Yes]
Optimize JavaScript [Yes]
Optimize CSS [Yes]
Delete Google-Fonts [Yes]
Aggregate inline-CSS [Yes]

Under “more options” both are set to [Yes] as well.

Disabling CSS-optimization maybe will is solving the problem … of course, this is only a temporary solution for both of us.

[Tom]

I just posted a ticket with them – we’ll figure it out 🙂

[Roman]

Hello tom,

thank you for your effort! I just saw the post. If any information should be needed from me, please let me know.

[Tom]

Can you let me know what other plugins you have activated?

Thanks!

[Roman]

Sure, of course. Here is was a document listing all installed and active plugins. Some of them will not be unknown to you 😉

[Tom]

What’s strange is I set up a dev site and added Autoptimize, but I can’t get it to happen. Of course that makes it very hard to debug – it means we have another layer of conflict coming from somewhere.

Is there any way you can disable your other plugins one by one to see if one of them is causing it? You can create a staging site using a plugin like Duplicator if you don’t want to disrupt your live site.

[Roman]

Hello Tom,

What’s strange is I set up a dev site and added Autoptimize, but I can’t get it to happen.

that’s really strange. I’ll do it the way you suggested and then describe my observations. I’ll need some time, but I try to hurry.

[Tom]

Sounds good – thank you!

[Roman]

I did it as you suggested … unfortunately without success.

Although I deactivated all plugins one after the other (apart from GP-Theme) and always deleted the cache (autoptimize and the regular caching plugin), the described error persisted. I had also disabled the childtheme (just renamed the folder roughly via ftp) and for a brief moment had the impression of success. Unfortunately, that was not the case, reproducing this was not possible – the mistake unfortunately remained.

Too bad, I’m sorry that this too has not led to success. In addition, I’ve been investigating the website in DEBUG mode, hoping to find a bug that could lead us to the right track. Unfortunately, without significant success.

I will make a copy with Dublicator in the coming days and take a closer look at the problem. I’ll contact you as soon as I know something new – I do not want to steal your precious time. For the time being, disabling the CSS optimization must be enough.

If there is anything else I can support, please let me know.

[Tom]

I really appreciate your help so far, thank you!

Did you manager to get that staging site up so we could take a deeper look?

[Tom]

Can you try with GP 2.0 beta? I can’t get it to happen on our demo anymore with it installed: https://generatepress.com/generatepress-2-0-alpha-beta/

Let me know 🙂

[Author]

Posts