Steps to Reproduce
1. Create a native UIViewController with a WKWebView, loading test-1.html (contains position:fixed header that displays correctly).
2. Push another UIViewController also with a WKWebView, this time loading test-2.html.
3. In test-2.html, tap into the to summon the on-screen keyboard.
4. Without calling blur(), perform an interactive swipe-back gesture to go back to the first view controller.
5. Observe that the fixed header in test-1.html is now offset downward by approximately the height of the keyboard and does not return to its original position.
demo-link : https://bugs.webkit.org/attachment.cgi?id=476324
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
background-color: #fff;
padding: .1rem .1rem;
position: relative;
width: 100%;
}
li {
position: relative;
line-height: .46rem;
}
.options {
background-color: red;
height: 4.8rem;
height: 70vh;
margin-top: -.01rem;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: .2rem;
width: 100%;
}
.aaaa {
max-width: 300px;
max-height: 200px;
}
</style>
</head>
<body>
<button id="aa_click">click</button>
<div class="bbbbb">
<div class="aaaa">
<div class="header">
<h3>reason</h3><span class="close-pop"><i></i></span>
</div>
<div class="options">
<ul>
<li class="">
<p class="optionItem">aa</p><i></i>
</li>
<li class="">
<p class="optionItem">bb</p><i></i>
</li>
<li class="">
<p class="optionItem">cc</p><i></i>
</li>
<li class="">
<p class="optionItem">dd</p><i></i>
</li>
<li class="selected">
<p class="optionItem">ee</p><i></i>
</li>
<li class="">
<p class="optionItem">ff</p><i></i>
</li>
<li class="">
<p class="optionItem">gg</p><i></i>
</li>
<li class="">
<p class="optionItem">sdf</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
<li class="">
<p class="optionItem">aaa</p><i></i>
</li>
</ul>
</div>
</div>
</div>
<script>
document.getElementById("aa_click").onclick = function () {
let a = document.getElementsByClassName("bbbbb")[0];
let b = a.style.visibility
if (b == 'hidden') {
a.style.visibility = "visible";
} else {
a.style.visibility = "hidden";
}
};
</script>
</body>
</html>
In iOS18 beta5, open this HTML with wkwebview, click the button to hide the list, and the webview will be terminated.If one of the following three conditions is triggered, the webview will not be terminated:
Remove the elements in ul until the list is no longer slidable
Remove the position:relative of the header element
Remove the position:relative of the li element
wkwebview error:
Topic:
Safari & Web
SubTopic:
General