Modal window in absolute center of viewport | Safari and IOS issue - css

Question

I have a problem that's driving me insane, and it has done so for quite some time. I've spent days trying to figure this one out with no success. Google is basically purple to me now. Additionally I fear the answer might be embarrassingly easy - but I'm about to go drown myself so here goes:
The problem:
I use pure css modal windows on my site. They are set to be absolutely positioned using margin: 0 auto; and translateY(-50%); like so:
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
I am using named anchors to hide/show the modal windows.
This works beautifully in basically every browser - I get the modal windows to appear and disappear like they are supposed to, in the center of the VIEWPORT of my browser window. In Safari and on iPhones and iPads however, it seems my modal windows get absolutely centered relative to the ENTIRE PAGE/DOCUMENT.
So, if my page has a vertical scrollbar, clicking the anchor link and showing the modal window makes the BROWSER WINDOW jump as well - in order to display the modal window in the absolute center of the entire page.
I include my modal windows just before the closing body tag like so:
<?php
include 'layout/elements/modal/users_online.php';
include 'layout/elements/modal/requests.php';
include 'layout/elements/modal/notifications.php';
include 'layout/elements/modal/messages.php';
include 'layout/elements/copyright.php';
include 'layout/elements/modal/developer.php';
?>
</body>
</html>
This is the code of my modal windows:
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 50%;
left: 0;
color: #333333;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}

Answer 1

So thanks to weBer (seriously thank you so much :D) I was able to figure out the answer.
This works:
.modal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.modal:target {
display: block;
outline: none;
}
.modal .big_container {
position: fixed;
display: block;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 785px;
max-width: 785px;
min-height: 515px;
max-height: 515px;
margin: 0px auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}

Answer 2

Am not sure this is your answer but here it goes.
Am taking .modal as your pop up overlay background. So change its code to -
.modal {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #333333;
}
And .modal .big_container- which is our content box should have the following style.
.modal .big_container {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
width: 785px;
height: 515px;
display:inline-block;
position:absolute;
left:50%;
top:50%;
-webkit-transform: translateY(-50%,-50%);
-ms-transform: translateY(-50%,-50%);
transform: translateY(-50%,);
padding: 20px;
box-sizing:border-box;
background-color: #ffffff;
box-shadow: 0px 1px 26px -3px #777;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
Check if it works for. I think this might, I use this in my most of the projects.