CSS - 在移动浏览器中无法滚动

Question

我创建了一个带有对话框的灯箱。灯箱的位置是固定的。此外，我隐藏了网页的溢出，以减少灯箱的高度。如果嵌套对话框的高度变大，我想要对话框的垂直滚动条。它在桌面浏览器中运行良好，但在移动设备上我没有用于对话框的垂直滚动条，其内容不可滚动，为什么？

js fiddle

HTML

<div class="lightbox">
<div class="dialog"><h4>Headline</h4>

    <p>
        ...</p>
</div>

 <h2> Website content</h2>
 <p>...</p>

CSS

body{
background: red;
padding: 20px;
overflow: hidden;
}

.lightbox{
background: rgba(255,255,255, 0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.dialog{
 width: 300px;
background: lightgrey;
padding: 20px;
margin: 50px auto;
color: white;
border: 1px solid black;
overflow: auto;
max-height: 100%;
 }