Strange blue "border" around hamburger-icon on iPhone

[jolajaslon]

I have been testing SM v2.0.0alpha recently and I like it a lot. I am starting to get a really nice responsive menu for my community site.

I have run into one problem though. For some reason the hamburger-icon to open/close the collapsible menu on mobiles gets a strange blue line around it on iPhones, I have tested both on a 12 Pro and a 13 iPhone. First, when you load the page the hamburger menu look good. But when I open it by clicking on it it looks like this on the iPhone:

... and then when I click the "X" to close the menu the hamburger menu looks like this:

This happens both on Chrome, Firefox and Safari.

When I do the same on an Android phone everything looks great. And it also looks normal on my computer if I reduce the size of the browser to bring up the hamburger-icon.

Anyone have any idea about what might be giving this irritating blue line around the hamburger-icon on iPhones?

[jolajaslon]

I'm responding to myself here because I have found something that might cause this blue line around the hamburger icon on iPhones.

The blue line is likely due to a default browser behavior on iPhones known as "focus outline." This outline appears when an interactive element, such as a button or link, receives focus, typically when a user taps on it or navigates via the keyboard. This is an accessibility feature intended to help users who navigate via keyboard or other assistive devices, to see where they are interacting on the screen.

It should be possible to remove this blue outline by setting "outline: none;". I have tried to do that both on .sm-toggler:focus and .sm-toggler-icon:focus. But the blue outline still remains on iPhones. Any ideas on how to get rid of this blue outline?

[jolajaslon]

I found the correct solution. You need to remove the outline from the sm-toggler-anchor class. I added this to my smartmenus-custom.scss file:

.sm-toggler-anchor:focus {
outline: none;
}

This removed that irritating blue outline around the hamburger icon on iPhones