Buttons on HTML Page not working in Safari / on iPhone

Viewed 1511

I have some Bootstrap-based HTML pages with some javascript and internal CSS, served in Flask, using Jinjja templates. It works perfectly fine on Windows and Android, using Chrome. But when I try to click certain buttons while on an iPhone (Chrome) or on Safari, they don't work. There's no error message in Chrome either.

Here's a sample of the button I used:

<div class="container mt-4">
  <form action="/skill" method="get">
    <div class="btn-group-vertical mt-10" style="width:100%">
      <button  id="Health" onClick="selection(this.id)" type="button" class="btn btn-secondary mb-3" style="background-color: #4a8bae;white-space: normal;">
        <h4 class="display-5 pt-2">Health</h4>
        <p class="mb-2 font-weight-normal">The centre of human happiness and well-being.</p>
      </button>
    </div>
  </form>
</div>

After clicking the button, it's supposed to sessionstorage the id chosen.

Please advise on what I can do to fix this! Let me know if I should post any other information. Thank you!

1 Answers

I had the same situation, but at least in my case I just turned of the safari's pop-up blocker (at the iphone settings) and everything works fine...

Related