About the problem of the dialog generated by the div tag that occurs in Safari on iPadOS 15.0

Question

Created Nov ’21

Replies 0

Boosts 0

Participants 1

When a dialog is generated with a div in Safari on iPadOS 15.0, There is a problem that the UI of the button and the position of the event listener are different. The button event does not occur unless the button above the position of the button displayed in the dialog is pressed.

StespsToReproduce: (1) Display the dialog in the state where the address bar and tab of safari are not displayed on iOS15. (2) Press the button.

SampleCode(.asp)：

<!DOCTYPE html>
<html id="htmlcontainer" lang="ja">
<head>
<title>Demo</title>
<meta name="viewport" http-equiv="content-type">
<style>
    body {
        fon-family: Arial, Helvetica, San-serif;
    }
    .modal {
        display: none;
        position:absolute;
        z-index: 950;
        width: 300px;
        height: 100px;
        border:2px solid gray;
        //box-shadow:2px 2px 3px;
        border-radius: 4px;
        background-color: #eeeeee;
    }
    #dlgBtn {
        margin-top:15px;
        margin-left:257px;
    }
    .modal-overlay {
        top:0px;
        left:0px;
        z-index: 100;
        opacity: 0;
        disply: none;
        position:absolute;
        background-color: gray;
    }
    .html-modal-open {
        position: fixed;
        overflow-y:scroll;
    }
</style>
</head>
<body>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<div>
    <button id="myBtn" onclick="openM()">Open Modal</button>
</div>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<div id="myModal" class="modal">
    <p><strong>View conversation display</strong></p>
    <button id="dlgBtn" onclick="closeM()">OK</button>
</div>
<div id="divfront" class="modal-overlay"></div>
<script>
    var modald = document.getElementById("myModal");
    var myBtn = document.getElementById("myBtn");
    var dlgBtn = document.getElementById("dlgBtn");
    var divfront = document.getElementById("divfront");
    var p1_element = document.getElementById("htmlcontainer");
    function openM() { 
        modald.style.display = "block";
        modald.style.top = document.body.offsetHeight/2 - modald.clientHeight/2 + "px";
        modald.style.left = document.body.offsetWidth/2 - modald.clientWidth/2 + "px";
        
        divfront.style.width = document.body.offsetWidth + "px";
        divfront.style.height = document.body.offsetHeight + "px";
        divfront.style.display = "block";
        
        p1_element.classList.add("html-modal-open");
    }
    function closeM() { 
        modald.style.display = "none";
        divfront.style.display = "none";
        
        p1_element.classList.remove("html-modal-open");
    }
</script>
</body>
</html>

Boost