Why is layout falling in Safari?

Question

safari

Good afternoon! I've been scratching my head all morning. For some reason, in the Safari browser from my phone, the layout of some elements falls (the shadow does not appear in the form and the font of the phone number falls), but in chrome it is beautiful! What could be wrong? I tried to set the style priority with an identifier, nothing changed ..

<p class="phone" id="phoneID">[phone]</p>

.phone
  {
    position: absolute;
    margin-top: 10px;
    display: block;
    padding-left: 10px;
    background: url(img/tel.jpg) no-repeat;
    width: 183px;
    right: 17px;
    height: 29px;
    padding-top: 4px;
    line-height: 30px;
    font: 100 19px NSCReg;
    color: #ffffff !important;
  }
 #phoneID
 {
    color: #ffffff; /*была попытка задать приоритет стиля через ID*/
 }

and a piece of shadow-highlight style

.veryBad 		{		
  -webkit-box-shadow: 0px 0px 8px 0px rgba(255, 117, 117, 1);
  -moz-box-shadow:    0px 0px 8px 0px rgba(255, 117, 117, 1);
  box-shadow:0px 0px 8px 0px rgba(255, 117, 117, 1);		}

Answer 1

in head:

<meta name="format-detection" content="telephone=no">