Здесь я упростил одну из наших производственных ошибок, пользователь не может прокручивать содержимое всплывающего окна, которое закладывается в диалог.И всплывающее окно, и диалог фиксируются с правильными z-index es.
Нижний слой, тело, включает в себя несколько композиционных слоев, созданных с помощью 3D-преобразований.Это делает диалоги наложений и всплывающие в отдельные слои композиции.Следовательно, всплывающее окно не прокручивается.
Этот фрагмент показывает, как всплывающее окно ведет себя без возможности прокрутки.В отличие от этого, если transform: translateZ(0), создающий композиционные слои, закомментирован или размер окна изменен для принудительного повторного рендеринга, всплывающие окна снова становятся прокручиваемыми.
Я протестировал его на Edge /Windows, Chrome (70.0.3538.110) / Windows & Mac, Firefox / Mac.Все Chromes сталкиваются с этой «ошибкой».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
#side {
margin: 0;
padding: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
overflow-x: hidden;
overflow-y: auto;
z-index: 4;
background: blue;
transform: translateZ(0);
}
#mask {
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
}
#dialog {
position: fixed;
height: 400px;
width: 400px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: white;
z-index: 1000;
border: darkblue 1px solid;
}
@keyframes tooltip2In {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#popup-in-dialog {
position: fixed;
top: 10%;
left: 32%;
z-index: 1500;
min-height: 22px;
padding: 8px 12px;
color: black;
font-size: 12px;
border-radius: 2px;
max-width: 500px;
animation: tooltip3In 0.2s linear;
-webkit-animation: tooltip2In 0.2s linear;
background-color: #666;
border: gray 1px solid;
width: 200px;
padding: 6px 0;
cursor: pointer;
max-height: 352px;
overflow-y: auto;
background-color: #fff;
}
#popup-in-dialog li {
line-height: 48px;
}
</style>
</head>
<body>
<ol id="side">
<script>
var content = Array(99).fill(null).map((_, i) => `<li style="position:relative"><div style="position:absolute;z-index:10;"></div>${i}</li>`).join('')
document.write(content)
</script>
</ol>
<ol id="content">
<script>
var content = Array(200).fill(null).map((_, i) => `<li style="position:relative"><div style="position:absolute;z-index:10;"></div>${i}</li>`).join('')
document.write(content)
</script>
</ol>
<div id="modal-container">
<div>
<div id="mask">
</div>
<div id="dialog">
<h1>Please select</h1>
</div>
</div>
<div>
<div id="popup-in-dialog">
<ol id="select">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ol>
</div>
</div>
</div>
</body>
</html>
== update == Прикрепленный gif. 