Относительное положение Safari внутри flex - PullRequest
0 голосов
/ 08 июня 2018

Я тестировал Safari 602.1 на iOS 10, поскольку у меня нет другого устройства.Я использую Bootstrap 4.1, и у меня проблемы с позиционированием элемента внутри столбца.Я попробовал автофиксирование Bootstrap, но это не помогло.

Текст вообще не позиционируется.

Экран с iPhone:

Screen from 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>

Заранее спасибо

1 Ответ

0 голосов
/ 08 июня 2018

У меня нет устройства ios для тестирования, но я бы переместил относительное положение на один уровень вверх и сделал бы .verticalHorizontal абсолют:

.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%;
  position: absolute;
  -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 position-relative">
					<h1 class="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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...