БЛОГ НА HUSL


Неправильное отображение HTML разметки в Safari

Автор вопроса: VladOv

Подскажите пожалуйста. Опыта разработки в веб сайтах до этого не было. Чисто back-end. Это первый проект. На Chrome, Edge, Opera, Firefox всё работает одинаково правильно (ПК и мобильная версия). Но на Safari (либо же Chrome в IPhone) всё ломается и выглядит так:

Сравнение 2х результатов

Можете подсказать куда копать чтобы исправить? Исходные куски кодов HTML, CSS прилагаю:

fieldset {
  display: inline-flex;
  flex-flow: column wrap;
  width: 320px;
  min-width: 270px;
  max-width: 350px;
  height: auto;
  margin: 20px;
  padding-bottom: 15px;
  margin-right: 5px;
  border-radius: 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
  box-shadow: 15px 15px 20px rgba(0, 0, 0, .17), -15px -15px 20px #fff;
  border: none;
  transition-duration: 0.4s;
}

.settingsGrid {
  display: grid;
  height: auto;
  min-height: 100px;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  font-family: 'Geologica', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
<fieldset class="">
  <legend class="">Режим работы</legend>
  <div class="settingsGrid">
    <div class="settingsHeader">Протокол управления</div>
    <select class="selectElem" id="controlInterface">
      <option class="" selected="">Opentherm</option>
      <option class="">eBus</option>
      <option class="">Реле запроса тепла</option>
    </select>
    <div data-tooltip="ПУ - Уставка температур ЦО/ГВС напрямую. ПТС - Поддержание заданной комнатной температуры" class="settingsHeader" id="workingModeHeader">Режим работы</div>
    <select class="selectElem" id="workingMode">
      <option class="" selected="">Прямое управление</option>
      <option class="">Программный ТС</option>
    </select>
    <div data-tooltip="Комната - датчик температуры находится в помещении. Улица - за пределами квартиры/дома" class="settingsHeaderHidden" id="thermostatModeHeader">Режим термостата</div>
    <select class="selectElemHidden" id="thermostatMode">
      <option class="" selected="">Комната</option>
      <option class="">Улица</option>
    </select>
    <div class="settingsHeaderHidden" id="tempSensorHeader">Датчик Температуры</div>
    <select class="selectElemHidden" id="tempSensor">
      <option class="" selected="">NTC10k (3950)</option>
      <option class="">MQTT Temp</option>
    </select>
    <div data-tooltip="Значение кривой определяет расчётную температуру ЦО при “Уличном режиме”" class="settingsHeaderHidden" id="climateCurveHeader">Климатическая кривая</div>
    <select class="selectElemHidden" id="climateCurve">
      <option class="">k=0.10</option>
      <option class="">k=0.20</option>
      <option class="">k=0.30</option>
      <option class="">k=0.40</option>
      <option class="">k=0.50</option>
      <option class="">k=0.60</option>
      <option class="">k=0.70</option>
      <option class="">k=0.80</option>
      <option class="">k=0.90</option>
      <option class="" selected="">k=1.00</option>
      <option class="">k=1.10</option>
      <option class="">k=1.20</option>
      <option class="">k=1.30</option>
      <option class="">k=1.40</option>
      <option class="">k=1.50</option>
      <option class="">k=1.60</option>
      <option class="">k=1.70</option>
      <option class="">k=1.80</option>
      <option class="">k=1.90</option>
      <option class="">k=2.00</option>
    </select>
  </div>
</fieldset>


Источник

Ответы (1 шт):

Автор решения: puffleeck

Но на Safari (либо же Chrome в IPhone)

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

а на счет кода, у вас как минимум строки не заданы, grid-auto-rows: 1fr; возможно поможет.

ииии... отдельные гапы? я б запихнул в общий grid-gap: 10px; все равно же размер одинаковый.

fieldset {
  display: inline-flex;
  flex-flow: column wrap;
  width: 320px;
  min-width: 270px;
  max-width: 350px;
  height: auto;
  margin: 20px;
  padding-bottom: 15px;
  margin-right: 5px;
  border-radius: 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
  box-shadow: 15px 15px 20px rgba(0, 0, 0, .17), -15px -15px 20px #fff;
  border: none;
  transition-duration: 0.4s;
}

.settingsGrid {
  display: grid;
  height: auto;
  min-height: 100px;
  grid-template-columns: auto auto;
  grid-auto-rows: 1fr;     /*!!!*/
  grid-gap: 10px;          /*!!!*/
  font-family: 'Geologica', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
<fieldset class="">
  <legend class="">Режим работы</legend>
  <div class="settingsGrid">
    <div class="settingsHeader">Протокол управления</div>
    <select class="selectElem" id="controlInterface">
      <option class="" selected="">Opentherm</option>
      <option class="">eBus</option>
      <option class="">Реле запроса тепла</option>
    </select>
    <div data-tooltip="ПУ - Уставка температур ЦО/ГВС напрямую. ПТС - Поддержание заданной комнатной температуры" class="settingsHeader" id="workingModeHeader">Режим работы</div>
    <select class="selectElem" id="workingMode">
      <option class="" selected="">Прямое управление</option>
      <option class="">Программный ТС</option>
    </select>
    <div data-tooltip="Комната - датчик температуры находится в помещении. Улица - за пределами квартиры/дома" class="settingsHeaderHidden" id="thermostatModeHeader">Режим термостата</div>
    <select class="selectElemHidden" id="thermostatMode">
      <option class="" selected="">Комната</option>
      <option class="">Улица</option>
    </select>
    <div class="settingsHeaderHidden" id="tempSensorHeader">Датчик Температуры</div>
    <select class="selectElemHidden" id="tempSensor">
      <option class="" selected="">NTC10k (3950)</option>
      <option class="">MQTT Temp</option>
    </select>
    <div data-tooltip="Значение кривой определяет расчётную температуру ЦО при “Уличном режиме”" class="settingsHeaderHidden" id="climateCurveHeader">Климатическая кривая</div>
    <select class="selectElemHidden" id="climateCurve">
      <option class="">k=0.10</option>
      <option class="">k=0.20</option>
      <option class="">k=0.30</option>
      <option class="">k=0.40</option>
      <option class="">k=0.50</option>
      <option class="">k=0.60</option>
      <option class="">k=0.70</option>
      <option class="">k=0.80</option>
      <option class="">k=0.90</option>
      <option class="" selected="">k=1.00</option>
      <option class="">k=1.10</option>
      <option class="">k=1.20</option>
      <option class="">k=1.30</option>
      <option class="">k=1.40</option>
      <option class="">k=1.50</option>
      <option class="">k=1.60</option>
      <option class="">k=1.70</option>
      <option class="">k=1.80</option>
      <option class="">k=1.90</option>
      <option class="">k=2.00</option>
    </select>
  </div>
</fieldset>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.