Pro 6.0.7 – Minor Issues

Beta
#1

@Charlie @kory just noticed a couple small things

1 – Disable Body Scroll does not appear to actually disable body scrolling for Content Area Off Canvas elements.

image

2 – Accordions inside components inside Content Area Off Canvas requires two taps to open on mobile. I’ll put a site in a private note where you can check it out. But on mobile phones, I have to tap twice to get the accordion to open. Works fine with a single click on desktop.

It’s kind of funky. I wonder if the active state of the toggle button is somehow hijacking focus. Because if I tap anywhere in the Off Canvas content prior to tapping the accordion (e.g. tapping the background or scrolling), the accordions works fine. And once I’ve opened one accordion, all the others work fine with a single tap.

Edit: Actually, this issue appears to affect any element within a component inside the Content Area Off Canvas element. The first time I try to tap a button, it simply shows the interaction state. Then I have to tap it again to follow the link.

Repro Steps:

  1. Create a component that contains an Accordion and/or Button
  2. Put that component into the Content Area of a Content Area Off Canvas element using the shortcode
  3. Save, and view on the front end from a mobile phone
  4. Tap the toggle to open the Content Area
  5. Tap on an accordion or button

Observed:
The first time you tap an Accordion or Button, you only see the interaction state change. You have to tap again to actually trigger the Accordion or follow the link from the button.

#2

Both are noted and both of these will probably be looked at together. Weird #2 was only happening in safari for me. Thanks for the live examples too have a great day!

2 Likes
#3

Thanks @charlie! Any idea if that’ll be one of these minor updates? Or just a future update at some point?

1 Like
#4

I’m looking into the toggle issue of another site so I’ll check that issue is the same on your site very soon. All the toggles use the same code so it should.

For the scroll one I probably won’t get to that till next week.

1 Like
#5

6.1.5 has a fix to determine the initial state of toggles better. And 6.1.6 is going to have better event handling for mobile. Let’s revisit then I was not able to recreate the issue with an offcanvas with an accordion in my local, I am on the latest release tho so maybe that’s a good sign. If it persists it’ll really help me to get an All-one-migration file of the site design. Apologies this got buried, it took a little bit to get to this point with our frontend libraries.

Two click on menu items needed in off canvas elements on iOs systems
#6

No worries, and thanks @Charlie. I just put 6.1.5 on one of the affected sites, and the same thing is still happening. When I tap to open an off canvas modal, the content within that modal takes an extra tap before I can interact with it (tapping a button, expanding an accordion, etc.).

Specifically I’m trying the site in a logged out state in mobile safari, on the latest version of iOS.

Happy to share a site anytime. I can even give you access to a live site too. Whichever’s going to be most helpful. Thanks!

1 Like
#7

I can confirm this issue too and it is still present in version 6.1.6. In my case a navigation collapsed element.
Only two clicks or first scrolling the off canvas and the click works.
Still a workaround ist to use a mega menu dropdown element and let it look like an off canvas element.

2 Likes
#8

@devinelston I’ll need access to go further on fixing your site. Or the header element data to see what’s interfering with your toggle. The following fix did not help when trying it on your site.

@Regnalf Your issue got stale, but I was able to fix your double tap issue with the following the CSS while still being able to scroll the off-canvas area. Still debating on what to do about this scrollbar library we are using.

.ps__rail-y {
 display: none !important;
}
#9

@Charlie, apologies about the delay – but I’ve added login credentials to the original secure note. I updated to the latest 6.2.2, and the tap issue persists in iOS Safari.

1 Like
#10

My bad I think the scrollbar CSS above does fix your site. I added it to global CSS and it’s working on my end now. Try it out and let me know if it still takes two taps.

#11

@Charlie yup, that works – thank you! Is that a change that’s going to end up in an update? Or will I need to add that to all sites that use off canvas modals that have anything interactive in them?

1 Like
#12

Great! I haven’t added it globally yet just to debate some options. I think I’ve seen enough issues from this scrollbar library to want to remove it eventually. The CSS provided prevents it from hijacking the initial event, because it thinks everything in the offcanvas is the scrollbar or something like that for the first tap. It’s used a little more by the x templates so going through usages and replacing with native scrollbars would be a decently sized project.

Adding the CSS hides the current scrollbars in off-canvas and modal as a caveat. I’ll probably add it in the meantime to not have mobile issues like this or an option to add the CSS for you in theme options. Might be something we try out in 6.3.

2 Likes