Focus state on buttons does not show up in Safari

I saw someone posted this about a year and a half ago and I’d like to point out this bug as well. Focus on buttons works as expected in Chrome, but not Safari. Seems like a big oversight for such a standard feature. Hope someone else can chime in. Thanks!

Hi @desktopgeo, thanks for bringing this up. This is probably due to some differences in the way the browsers handle the focus events and how that gets triggered, it could use some additional investigation.

I found this in GH that seemed to be related: Click and focus behavior across browsers & OSes · GitHub

I am here to help, and will check into this further. The functionality in Webflow to set styling on the focused states is consistent, however the rendering can possibly be different across browsers.

Ok, I’ve found the solution and it doesn’t involve making a button out of a div or using javascript. This will work for anything buttons, links, divs, etc.

For Safari, in order for focus to work properly, setting a tabIndex attribute fixes all my issues. Link here for more information: What is the HTML tabindex attribute? - Stack Overflow . For anyone else having this issue, you can click your element in web flow, go to the settings tab, and then add that custom attribute.

Thanks @cyberdave and good luck to anyone else with this issue!

1 Like

@desktopgeo, Nice find. I am still reporting this one to the dev team to see if we can get the option for this added as a native option.

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