1

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:

$(".primary-menu li a").on('click', function() { $(this).css("font-size", "15px"); });

CSS:

.primary-menu li a:focus { font-size: 15px !important; }

Neither the jQuery or CSS Works on the iOS only Android

Thank You

Improve this question
2
  • any help on this problem? Commented Nov 6, 2017 at 23:50
  • Try adding tabIndex="0" to your .primary-menu object. This has been already addressed here: stackoverflow.com/questions/5832436/… Commented Jan 10, 2018 at 13:43

3 Answers 3

Reset to default
3

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

<button onclick="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:

<a onclick="this.focus()">Link</a>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

Comments

0

The cleanest solution seems to add a tabindex="0" attribute on the element. This way, CSS selector works.

Last problem is that focused element doesn't lose focus when you click outside of it.

Improve this answer

Comments