Customizer panel back button does not appear on iOS devices

[Ipstenu]

If you open the customizer on the iOS, the widget buttons don't work as expected.

Instead of showing a back arrow in the upper left corner, you keep the X, and clicking it does exactly what the X should do.

Tested on iOS Mini (@rboren also had this issue on an iPad Air)

[celloexpressions]

Specifically, the issue is that the panel-back button just isn't showing up (most likely happens with any panel, could use the Settings Customizer plugin shell for testing another panel). It's supposed to cover up the close icon. A non-beta solution would involve swiping to get out of a panel, but we'll leave that to #28784.

I think it isn't showing up because of iOS' issues with position: fixed;. I don't have a device to test on, but will try a messy patch to confirm that after doing some research.

[celloexpressions]

Apparently position: fixed isn't an issue anymore, so not sure why, but the issue is that the back icon doesn't show up. I can advise on its CSS but have no idea why that's happening here. It'll be a CSS issue with the back button, though.

Whatever it is, I think it's only showing up on iOS. I can't reproduce on any other devices, or emulating iPad with Chrome, although that doesn't surprise me.

[ocean90]

It seems like the back button can't break out of .wp-full-overlay-sidebar-content, see ​https://cloudup.com/cDi7ffEpK3e

[ocean90]

#customize-controls .wp-full-overlay-sidebar-content {
overflow-y: auto;
overflow-x: hidden;
}

.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
overflow: auto
}

needs to be removed, to get the button visible...

[johneckman]

Patch to remove overflow as described

[johneckman]

Patch with just customize-controls.css not the rtl or min

[ocean90]

Sorry, I wasn't clear. We can't remove the rules, because on panel switching it will overflow. This is seems to be an issue with the iOS browser and needs a workaround, without removing the mentioned rules. They are just the reason, why the button is hidden.

[celloexpressions]

Use a universal back button in the header for all panels

[celloexpressions]

When I implemented this initially, it made sense for each panel to have its own back button. But we can just have them all use a universal one fairly easily while maintaining keyboard accessibility, since they're auto-focused anyway.

29135.diff​ switches to using a single back button for all panels, and locates the button in the header where it shouldn't run into the iOS bug that we're running into with this ticket. I don't have an iOS device to test on, but this should work. It's more churn than I'd like at this point, but the only other option is probably to implement touch gestures (swiping right to exit a panel), which is way to enhancementy to happen now.

accordion.js is really awful, but this change fits right in there. Once we eventually move the panel-switching JS to a more structured environment, it might make more sense to have separate buttons for each panel, but I'm okay with switching to one for now.

[ocean90]

29135.diff​ works on iOS.

Can't we move the panel specific code into customize-controls.js for now?

[helen]

ocean90 - can you finalize and commit this please?

[celloexpressions]

Replying to ocean90:

Can't we move the panel specific code into customize-controls.js for now?

We need to also prevent the accordion behavior, so I don't think we could completely extract it. And at that point, it's probably not worth the effort for now, should probably just wait and do it right.

[helen]

In 29610:

Customizer panels: use a single back button for all panels.

This also ensures the back button is visible on iOS devices.

props celloexpressions.
fixes #29135.