Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

submenu background seems to be broken on mobile devices ? #1635

Closed
Nikeo opened this issue Nov 29, 2018 · 12 comments 路 Fixed by #1637

Comments

@Nikeo
Copy link
Contributor

commented Nov 29, 2018

https://presscustomizr.com/release-note-for-customizr-for-customizr-pro-v2-1-10-and-customizr-free-v4-1-21

Hello again,
i have seen, that i wrote my comment in german. Now again in english 馃檪

I am very happy with the topic and use the Pro version. Since one of the last updates, the mobile menu on mobile and tablet is not working that way anymore. The submenus appear to be a completely transparent area so that the menu in the upper area is no longer readable. Have already checked all possible settings, but find nothing where I could adjust something else.
I have photographed the phenomenon, but do not know how I could show it here.
I would be very grateful if you could help me, so that the menu in the mobile version works well again.
Thank you in advance.
many Greetings
Birgit

if you go to 鈥 header>Design settings for smartphones and tablets in portrait orientation>(I used google translate here: ) Expand submenus when clicking 鈥 and uncheck it

Now all menus on the phone will expanded ( making 1 very long vertical menu ) but at least the customers can see the menu again and work with it (my solution for the moment).

FOR THE DEVELOPERS: please solve this problem.

With 鈥渆xpanded submenus when clicking鈥 checked the menu background on the phone will become transparant when you tap on one of the items.
And the customer can no longer read the menu.

BTW if you use the arrows on the right it sometimes will work again, but tapping on menu items makes it fail.

Same for me, on mobile when you open a submenu the background area of the entire menu becomes transparent and the customer can no longer read the menu.

-How to to copy this behavoir:

On mobile phone (not on pc! here it works ok)

1 click on hamburger
2 menu opens ok
3 click on a submenu
4 sub menu opens ok
5 directly after that the background becomes transparant

BTW when the menu background is transparant and I try using the expand icons on the right in the menu, everything will start working correctly again.

鈥 Temporary Solution:

For now as a temporary solution I unchecked 鈥 header> Design settings for smartphones and tablets in portrait orientation> Expand submenus when clicking.
This will expand all submenus and leave me with one big menu, but at least it is readable again.

@Nikeo

This comment has been minimized.

Copy link
Contributor Author

commented Nov 29, 2018

@eri-trabiccolo let's chat about this tomorrow morning if you can ?

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Nov 29, 2018

Mmm ok for the tomorrow chat.
Though after rapid testsnon the demo:

  1. happens only in pages with the slider below the menu
  2. doesn't happen for all the menu items
  3. for those affected menu items, happens only at the first expansion
  4. doesn't happen with FF for Android while happens with Chrome

I guess that we trigger some chrome bug there...

@Nikeo

This comment has been minimized.

Copy link
Contributor Author

commented Nov 30, 2018

ok thanks
would it be possible to chat at 10 AM ?

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Nov 30, 2018

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Nov 30, 2018

Looking at the header parts scss history I cannot find anything that would have produced this issue, as the changes affected only the .header-transparent element.
So I think it's a chrome for android recently introduced bug.

As we discussed, I thought the browser bug has to do with the transform (and related) CSS properties.
On our test site I've then added the following code: .mobile-nav__nav { backface-visibility: hidden }
which is one of those hacks to fix this kind of levels rendering issues, and with my tests it actually fixes the issue.
I know it's just a workaround, but that bug has no reason to me, hence cannot be solved with a more reasonable code :D
This also means that we need feedbacks on this, actually users reporting this issue can easily add that code in the Custom CSS box ...

@eri-trabiccolo eri-trabiccolo self-assigned this Nov 30, 2018

@eri-trabiccolo eri-trabiccolo changed the title submenu background seem to be broken on mobile devices ? submenu background seems to be broken on mobile devices ? Nov 30, 2018

eri-trabiccolo added a commit to eri-trabiccolo/customizr that referenced this issue Nov 30, 2018
@Nikeo

This comment has been minimized.

Copy link
Contributor Author

commented Nov 30, 2018

I'm asking the users to test your code.
Thanks !

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Nov 30, 2018

Yeah, it works fine here... (hopefully there should be no caching issue when using the custom css in the customizer)

@Nikeo

This comment has been minimized.

Copy link
Contributor Author

commented Nov 30, 2018

I've asked for the user's feedback. If you're confident with this patch, let's turn it into a PR before receiving user's feedback.

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Nov 30, 2018

I already did the PR. :)

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2018

so from what I can see users confirmed the validity of this workaround.
That's cool! :D

@Nikeo

This comment has been minimized.

Copy link
Contributor Author

commented Dec 7, 2018

Yes, now I need to update the theme !

@eri-trabiccolo

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2018

Naaa take your time :P

@Nikeo Nikeo closed this in #1637 Dec 14, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can鈥檛 perform that action at this time.