2

I have this simple snippet. Only thing it does is to refresh the content after the user touches one of the buttons:

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style-2.css">
    <link rel="stylesheet" type="text/css" href="responsive.css">
<script>
function init() {

    var content = "";
    var rand;
    
    for(var i=0; i<5; i++)
    {
        rand =  Math.floor(Math.random() * 10);
        content += "<a class=\"button\" id=\"" + rand + "\" onClick=\"init();\" href=\"#!\">" + rand + "</a>\n";
    }
    document.getElementById("choices").innerHTML = content;
}

function refreshcontent()
{
setTimeout(function(){ init()}, 900);
}

</script>
<meta charset="UTF-8">

</head>
    <body>
        <main>
            <body onload = "init();"/>
                <section id="services" class="white" >
                    <div id = "choices" >
                    </div>
            </section>
        </main>
    </body>
</html>

In Android, PC, and Mac, it works fine. But in my iPhone, regardless of the browser I use, the button I touch stays "pressed" after the content reloads.

I tested it by touching to a button and then immeadiately touching some empty space on screen, then it works fine.

What am I missing?

enter image description here enter image description here

padawan
  • 1,295
  • 1
  • 17
  • 45
  • maybe this could fix the problem ? https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices – Phoenixia Feb 05 '21 at 20:50
  • @Phoenixia this causes a whole another problem where I cannot evaluate the button which was touched. – padawan Feb 05 '21 at 21:05

0 Answers0