Mobile menu

Several visitors complain about the mobile menu. They only see a bluescreen. It is the background of the mobile menu. The rest of the website they do not see.

The strange thing is that all the complaining users use a Samsung device. The problem started after updating to 3.0. Other users (with an iPhone or other brand phones) have no problems.

We tested the site with Browserstack.com. The test with the Samsung Galaxy S4 (portrait) shows the problem: https://www.browserstack.com/screenshots/826be808683142db770c44de08df30840e2a3874

If we test http://demo.tagdiv.com/newsmag/ with Browserstack.com we see the issue also in the Samsung Galaxy S4. https://www.browserstack.com/screenshots/d2b36f4c83ab68c37ea4621e97daf65b4a5fa175

Hopefully you have a solution. Thanks in advance!

Regards, Sjoerd

• This topic was modified 10 years by Sjoerd.

Hi

The theme is tested and works fine on mobile devices, including Samsung Galaxy S4. I’ve tested our demo with S4 and it works fine. I am not sure why your visitors have this issue but they can try to clear phone’s cache memory then test the site again. Also for an accurate result the tests must be done with a real device not with emulators or other testing tools as the results may not be accurate.

Thanks!

Hi, thanks for your quick response.

After 6 days we already have dozens of complaints. All users with a Samsung device 😉

The problem occurs on all kind of Samsung devices. We tested it with real phones (see schreenshot: http://www.screencast.com/t/3RnfqtrO). Firefox and Chrome are doing well. But the default browser of Samsung not. During loading the page it seems to be going well. When the browser is finished loading, the blue background screen of the mobile menu appears without the menu-options. It also happened to the demo site http://www.screencast.com/t/n3by58BHN.

What have we done:
– Internet history removed
– CloudFlare disabled
– All cache disabled
– Theme reinstalled
– Server reboot
– Custom code removed
– Ads removed
– Mobile logo removed

All these actions had no effect. The blue screen again returns. Hopefully you can do anything with this information.

Hi

The theme is tested and works fine with this browsers: http://screencast.com/t/vZR0udhd Also on our side we test it wit Chrome and Firefox, not with phone’s default browser. We did not tested the default browser of Samsung and we can’t provide a solution at the moment, sorry. Tryu using one of the tested browser as they should work fine on mobiles.

Thanks!

Hello! First of all congratulations for the excellent work you have done. It’s the first time that we communicate with you. Please note that unfortunately we also have the same problem in mobile, as Sjoerd. [The problem is that a blue background appears after loading, which covers all content, although the adaptation is according to specifications.

Regards from Greece !!! http://www.youngpeople.gr

Hi

Thank you for your generous thoughts and your review! We’re glad you like our theme. We invest a great amount of time and effort to create and permanently develop and improve our themes. This is why we truly appreciate your feedback.

I’ve checked your site and the theme works fine on mobile. The blue background covers all page when menu icon or search button it’s clicked: http://screencast.com/t/JhlfrzvLLFG However when the menu it’s closed the background disappear and the page content it’s displayed.
Make sure that you’re using one of the browsers indicated here: http://screencast.com/t/vZR0udhd to access the site. The theme is tested only with these browsers and if you’re using a different one we can’t guarantee that it will work fine.

Thanks!

After some research we found out that the problem only occurs on Samsung devices. We solved the problem with a change in the CSS code.


.td-search-background:after {
content: '';
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
z-index: -10;
-webkit-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}


We deleted:

position: absolute;
display: block;
and the site was visible for the mobile (Samsung)users