Как исправить несовместимые границы при масштабировании div в Firefox - PullRequest
1 голос
/ 20 мая 2019

У меня есть несколько простых веб-страниц, которые содержат похожий макет.Все эти страницы встроены в более крупный продукт в iframe, чтобы сохранить их независимость.Поскольку размер iframe можно изменять любым образом и расширять, он может работать в полноэкранном режиме и т. Д., Страница должна адаптироваться к нему.Выбранное решение состояло в том, чтобы перемасштабировать весь контент, поскольку он значительно упрощает создание (и медиа-запросы не будут работать).

Однако я заметил проблему при тестировании в Firefox (v68 x64).Когда я уменьшаю div с границами, в какой-то момент границы изменяются непоследовательно.Различные стороны div'ов будут либо показывать, либо не показывать никаких границ.Полученный эффект ужасен, и я заметил, что этого не происходит с другими браузерами (даже с IE11: D).

Я подготовил небольшой jsfiddle, чтобы показать, что происходит: jsfiddle

.container {
  width: 400px;
  height: 400px;
  background: black;
  transform-origin: 0 0;
  padding-top: 30px;
  transform: scale(0.4);
}

.btn {
  border: 2px solid white;
  margin: 20px 30px;
  height: 50px;
  color: white;
  line-height: 50px;
  padding-left: 20px;
}
<div class="container">
  <div class="btn">Btn 1</div>
  <div class="btn">Btn 2</div>
  <div class="btn">Btn 3</div>
</div>

Это происходит, когда я уменьшаю div, содержащий другие div с границами.В этом примере вторая кнопка, как представляется, не имеет верхней границы.

Я, очевидно, не ожидаю, что все страницы будут уменьшаться до бесконечности и при этом будут хорошо выглядеть, просто имеют согласованные границы, которые не исчезают.В других браузерах это работает намного лучше.Кто-нибудь знает, как эту проблему можно решить / улучшить?Я не могу изменить базовые условия (требования к масштабированию, встраивание страницы), но у меня есть полный доступ к самой странице, и я могу ее изменить.

Дайте мне знать, если вам требуется более подробная информация(например, сведения об экране, разрешение страницы по умолчанию ... и т. д.).

ПРИМЕЧАНИЕ. Предлагаемый дубликат не имеет ничего общего с этой проблемой, хотя проблема «выглядит аналогично», быстрое чтениепоказало бы, что рассматриваемый браузер отличается, основа проблем совершенно иная, и в дальнейшем ни одно из решений не работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...