Off-canvas navigation bug /quirk on iPhone

Hi All,

I have a question regarding an off-canvas nav I’ve implemented. It has been discovered that, on the iPhone, when a user navigates from one page to another (using the mobile nav) and then hits the browser back button, the user returns to the previous page… but…for some reason, the slide-out panel remains visible.

The way in which the nav works is pretty simple. I use JS (jQuery) to toggle a class of active onto the nav wrapper. This active class then uses transform: translate3d to slide the panel in like this:

 .primary-nav.active {
    display: block;
    -webkit-transform: translate3d(400px, 0, 0);
            transform: translate3d(400px, 0, 0);
  }

Pretty standard stuff really.

Heres a link to my site. To replicate you need to simply use the mobile nav to navigate from one page to another (remember - you need to do this on an iPhone. The issue doesn’t occur on my Galaxy S7, nor on a desktop browser.)

Furthermore…i’ve found that the same issue is happening on other people’s sites. It also occurs on this dropdown nav on the very popular WP theme Avada.

I need to decide if this is a bug that needs to be addressed, or if it is ‘just the way it is’ on iPhones.

I imagine if I could trigger a full page refresh when the browser back button is clicked it would fix my problem. But is this even possible?

any ideas would be appreciated

cheers

Noting that the class .active is being used to mark the current state, I would guess that it is being set by JavaScript which has no awareness of the brower’s back button. Sounds like a bit of JS rework is in order.

I don’t know if it can be worked around or not, but it is certainly not an HTML/CSS issue.

Your post can be moved to the JavaScript category if you wish.

Hi,

I don’t know if this is the issue but is the first thing I would check is that you have an invalid transform rule in .primary-nav.

  -webkit-transform: translate3d(0);
    transform: translate3d(0);

There are two few values for a 3d transform and they should be :

 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);

I don’y know if that’s the issue but its invalid code anyway and needs to be correct before we progress further.:slight_smile:

EDIT:

Just tested and it doesn’t make a difference in ios.

It seems ios keeps a cache of the last state of the page and the back button returns to the state as you left it including the active state for the nav (which if you think about it is what the user would want most of the time so I don’t see this as an issue as such).

The only way I could get the nav to hide when using the back button was by removing and adding some classes once the link in the menu was clicked.

I added this script at the end of the page.:

<script>
$( ".primary-nav li a" ).on( "click", function() {
	$('.primary-nav').removeClass('active').addClass('activeOff');
	$('.btn-mobile-hamburger').removeClass('closed');
});
</script>
</body>
</html>

(Obviously that could be added to the end of your js file instead.)

Next I found the hamburger menu js and added an extra Class here.

In this routine:

$(".btn-mobile-hamburger a").on("click", function(e){

I found this line:

$(“.primary-nav”).toggleClass(“active”);

and turned it into this:

$(".primary-nav").toggleClass("active").removeClass('activeOff');

Then I added one line of css to the end of the css file:

.primary-nav.activeOff {
	display:none;
}

That seems to reset the menu on ios when you use the back-button.

It seems a lot of effort to defeat what may actually be a feature:)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.