Why borders are getting chopped in safari browser?

Viewed 43

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?? enter image description here

my code:

<div class="loading-mask" data-role="loader" style="display: none !important">
    <div class="loader"> &nbsp;        
    </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;
    }
}
0 Answers
Related