Css - :focus Not Working On Ios

When I click a link the font-size does not get bigger on iOS but on android it does work. How do I get it to work What I have tried: ontouchstart='' in the body tag jQuery: $('.pri

Solution 1:

I had the same problem of non working :focus selector (in my case on a button) on iOS and this is my solution:

<buttononclick="this.focus()">Button</button>

So it is necessary to manually focus() the button onclick (I have no clue why). In my case it seemed to be to only working solution, tried others here: https://jsfiddle.net/sz1L75ro/8/

In case of the problem of the threadstarter I would suggest to also add the same onclick listener to the a elements:

<aonclick="this.focus()">Link</a>

Solution 2:

By no means an expert on css, or JavaScript for that matter but Googling around the same subject area (pure css event actions for iOS/mobile) has shown me that examples are quite hard to come by, however where I was looking for examples with flyouts here is an interesting example:

• [https://codepen.io/Tont/pen/hdsev][1] - Using a checkbox with 'display: none' over a button. The css references whether this input is 'checked' here:

  input:checked ~ ul.submenu{ max-height:300px; transition:max-height 0.5s ease-in; }

The same hidden checkbox methodology could be used to implement a pure css 'click' event handler with the action to be taken being change the font size of the <a> element.

Can't really help you with the JQuery as I don't have a way to test my code easily on iOS, however maybe try .setAttribute(<attribute_name>, <attribute_value>) instead of .css.