Why borders are getting chopped in safari browser? - css

Question

I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}