似乎有相当多的人遇到了这个问题，但我尝试了所有我读到的东西，没有任何运气......
我有一个联系人表单弹出模态表单（固定的），在Chrome，mozilla，IE上工作得很好。当我在safari（手机，ipad，mac等）上打开它时，它是固定的，所以当我向上或向下滚动时，它最终会在顶部页眉和页脚后面。屏幕尺寸不够高，无法增加页边距，即使我这样做，滚动仍会显示在页眉页脚元素后面。
似乎safari不喜欢固定的元素，我试过z-index(将footer和header设置为0甚至-1，并将modal设置得更高)，但没有效果，我还试过-webkit-transform: translate3d(0,0,0)!important，很多人似乎都这么做，但它没有起到作用。我是不是遗漏了什么？不幸的是，我还不能提供网站的直接链接，但我希望有人能给我指出正确的方向。
非常感谢你的帮助
HTML:
<div id="myModal" class="modal" style="display: block;">
<div class="modal-content">
<span class="close">×</span><h4>Form Title</h4>
/* form goes here*/
</div>
</div>
CSS。
.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);}
.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%;}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;}
.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);}
div.widget.mod-inner div.mod-content ul{list-style:none;padding-left:0px;}
.single div.widget.mod-container.my_custom_widget-7.widget_my_custom_widget.clearfix .modal{background:rgba(0,0,0,0.4);padding-top:40px;overflow:auto;}
.single div.widget.mod-container.my_custom_widget-7.widget_my_custom_widget.clearfix .modal-content{max-width:600px;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;padding:20px;}
刚刚添加了代码。我试图删除所有不相关的东西（请原谅我，我不太擅长这些东西）如果我没有正确添加这些代码，请告诉我，以便我可以修复它。再次，非常感谢您的帮助