Jump to content
  • 0

Чем вызвано описанное поведение в FF, и как его исправить?


dg-here
 Share

Question

Здравствуйте. В FF div.container__right приобретает ширину в 4000px, когда должен иметь ширину вложенной в него картинки.

Не пойму, почему так происходит? в остальных браузерах все хорошо...

<div class="container">
  <div class="container__left">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="container__right"><img src="img/stocks/card-3.jpeg" alt=""></div>
</div>
.container{
	position: relative;
	width: 100%;
	margin-top: 50px;

	&__left{
		width: 50%;
	}


	&__right{
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		direction: rtl;

		img{
			height: 100%;
			object-fit: contain;
		}
	}
}

 

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Скорее всего, особенности работы движка. Firefox принимает естественную, а не действительную ширину изображения. Из-за этого и распирает обертку.

Тут ведь цикличная зависимость получается: высота изображения зависит от контейнера → изображение вычисляет ширину с учетом соотношения сторон → контейнер должен получить теперь эту ширину. WebKit или какие там сейчас движки, по-видимому, пересчитывают эту ширину (последний этап), FF – нет.

Как исправить? Зависит от задачи. Для чего вам эта обертка нужна. Используется ли как-то? Как вариант, позиционировать само изображение... Повторю, зависит от контекста задачи.

Link to comment
Share on other sites

  • 0

А давайте все возьмем MS Edge на базе Chromium и начнем делать нормальные PWA, которые устанавливаются в систему. FF сознательно сломал всю свою экосистему переписав CSS на Rust. Это говно не только глючить начало, но и тормозить.

У нас есть общепринятый Webkit, который работает на Chromium и Safari. Что еще нужно? Не смотрите вообще на FireFox. Те кто гикает на Linux - нормальными не считаются. Linux - серверам, Windows - десктопам.

Люди покупают чаще ПК или ноутбук с предустановленной Windows, а там стоит нормальный себе Edge, который уже не нуждается ни в каких извращениях.

Зачем понимать Java и изучать отдельные извращенства на React, Vue или Angular, если можно сделать то же Progressive Web Application просто на том же jQuery или чистом JS?

Выбор очевиден. Не имеет смысла даже рассказывать что все разработчики всех браузеров работают по одной программе.

Я вот забил бы на вашем месте выяснять почему так с FireFox - я бы просто по башке Mozilla настучал и выгнал их исправлять ошибки. Никто ведь про их браузер из нормальных людей ни чего даже не знает. Его никто не устанавливает так как первым делом русские лезут на Яндекс или Mail и скачивают тот же хромиум в стрингах. А еще раньше они берут в руки свой Android, а там просто Chrome на любом устройстве.

Не воскрешайте труп пожалуйста.

  • Haha 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy