@vasIvas

Можете помочь с выявлением бага в браузерных эмуляторах?

Внизу две картинки, первая отображает работу эмулятора в FireFox, вторая в Google Chrome.
Как видно, работа одного и того же кода отличается.

9657517338ca4f11914872a0c18b8e37.gif16e763deca474995a03d96962a4e4a5e.gif

iPhone у меня нет, по этому я был бы очень благодарен, если бы счастливый обладатель яблочного телефона смог открыть в нем код ниже и сказал бы, как отображается у него на настоящем устройстве.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>i-test</title>
	<style>
		body {
			background: green;
		}
		* {
			margin: 0;
			padding: 0;
		}
		.main-container {
		  width: 100vw;
		  height: 100vh;
		  max-width: 100%;
		  margin-left: auto;
		  margin-right: auto; }
		  .main-container:after {
		    content: " ";
		    display: block;
		    clear: both; }

		@media (min-width: 320px) {
		  .cover-container {
		    width: 100%;
		    height: 100%;
		    background-image: url(image.png);
		    background-size: contain;
		    background-repeat: no-repeat;
		    background-position: top; } }

		@media (min-width: 568px) {
		  .cover-container {
		    width: 100%;
		    height: 100%;
		    background-image: url(image.png);
		    background-size: contain;
		    background-repeat: no-repeat;
		    background-position: left; } }
	</style>
</head>
<body>
	<div class="main-container">
		<div class="cover-container"></div>
	</div>
</body>
</html>


Картинка прилагается ниже. У нее есть желтая однапиксельная рамка, которая предназначена для обозначения границ.

6aac3e3ea63b449fa9c555014f88b3c0.png
  • Вопрос задан
  • 179 просмотров
Решения вопроса 1
batareika
@batareika
У вас в background-position прописано только одно измерение, а нужно два (x и y). Фаерфокс и вебкит додумывают по-своему, поэтому и отличия.
Замените на background-position: 0 0, или на background-position: left top, или как в вашем случае будет нужно

upd: поскольку сафари на вебките, то отображает как хром: тык
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы