Я тестировал Safari 602.1 на iOS 10, поскольку у меня нет другого устройства.Я использую Bootstrap 4.1, и у меня проблемы с позиционированием элемента внутри столбца.Я попробовал автофиксирование Bootstrap, но это не помогло.
Текст вообще не позиционируется.
Экран с iPhone:
Он работает везде, кроме Safari, я в отчаянии.
http://jsbin.com/tigowet/edit?html,css,output
.box {
color: #ffffff;
padding: 0.5rem;
width: 50%;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.box a {
color: #ffffff;
}
.box a:hover {
text-decoration: none;
}
.box input {
width: 100%;
}
.bgDarkBlue {
background-color: #3F51B5;
}
.shadowBox {
box-shadow: 7px 5px 25px black;
}
.verticalHorizontal {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="box shadowBox bgDarkBlue">
<a href="#">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="http://tusla.info/images/safari-column/evaluation.svg">
</div>
<div class="col-8 pl-sm-0">
<h1 class="position-relative verticalHorizontal">Text</h1>
</div>
</div>
</div>
</a>
</div>
<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
Заранее спасибо