CSS Pseudo elements not positioned properly on Safari - html

Question

I've wrote the following CSS that uses pseudo elements to design a footer.
Looks like it works fine on Chrome & Firefox on windows but on Safari the footer_il::after goes on the bottom of the page.
When im adding margin-top: -20em; on .footer_il::after it's working the way i want it but it obviously breaks on other browsers.
.footer_il::before {
width: 75px;
height: 70px;
-webkit-transform: rotate(134deg);
-ms-transform: rotate(134deg);
transform: rotate(134deg);
left: calc(100% - 463px - 85px);
margin-top: -2em;
}
.footer_il::after {
height: 54px;
left: 0;
width: calc(100% - 449px - 63px);
}
.footer_il::before,
.footer_il::after {
z-index: 100;
position: absolute;
content: "";
background-color: #f7f7f7
}
.footer {
height: 20em;
background-color: #000;
width: 100%;
display: inline-flex;
}
<!-- Footer -->
<footer class="footer_il bg-light">
<div class="footer">
<div class="footer_section_1">
<div class="footer_container">
<div class="footer_branding">
<div class ="footer_logo">
</div>
</div>
</div>
</div>
<div class="footer_section_2">
</div>
<div class="footer_section_3">
<div class="footer_container">
</div>
</div>
<div class="footer_section_4">
</div>
</div>
</footer>

Answer 1

So just by playing around a bit i ended up with the following result. Thanks to pschueller for the hint.
I've added the entire footer into a container. Set the class in absolute position and 100% width. Then added inside the ::after class 0 distance from top.
Now it's working on Mac OS Safari. Because there wasn't a top before it was getting outside of it's intended position.
.footer_entire_container {
position: absolute;
width: 100%;
}
.footer_il::before {
width: 75px;
height: 70px;
-webkit-transform: rotate(134deg);
-ms-transform: rotate(134deg);
transform: rotate(134deg);
left: calc(100% - 463px - 85px);
margin-top: -2em;
}
.footer_il::after {
height: 54px;
left: 0;
top: 0;
width: calc(100% - 449px - 63px);
}
.footer_il::before,
.footer_il::after {
z-index: 100;
position: absolute;
content: "";
background-color: #f7f7f7
}
.footer {
height: 20em;
background-color: #000;
width: 100%;
display: inline-flex;
}
<!-- Footer -->
<div class="footer_entire_container">
<footer class="footer_il bg-light">
<div class="footer">
<div class="footer_section_1">
<div class="footer_container">
<div class="footer_branding">
<div class ="footer_logo">
</div>
</div>
</div>
</div>
<div class="footer_section_2">
</div>
<div class="footer_section_3">
<div class="footer_container">
</div>
</div>
<div class="footer_section_4">
</div>
</div>
</footer>
</div>