Кроссбраузерность для Mac'а

Question

Пишу сайт где должна быть функция сортировки которая видоизменяется в зависимости от размера монитора. Для больших экранов это должны быть кнопки, в то время как для экранов поменьше это выпадающий список.

Запилил в Wordpress, начал тестить. На винде вообще без разницы chrome, opera, edge, да даже на internet explorer все работает четко. На телефонах тоже без проблем. Но с Mac'ом код почему-то не дружит. Все сразу съехало. При этом пока способы сортировки были только в одном варианте (либо кнопки, либо выпадающий список, без разницы).

Все работало и на Mac'е четко. Проблема появилась только после того как была добавлена адаптивность. Помогите разобраться в чем может быть проблема. Сам грешу на Display: none в конце css. Так как на весь остальной код он реагировал нормально.

document.querySelector(".sort-asc").onclick = function () {
  mySortAsc("data-rating");
};
document.querySelector(".sort-desc").onclick = function () {
  mySortAsc("data-spin");
};
document.querySelector(".sort-gift").onclick = function () {
  mySortAsc("data-gift");
};

document.querySelector(".sort-rating").onclick = function () {
  mySortAsc("data-deposit");
};

document.querySelector(".sort-asc-pc").onclick = function () {
  mySortAsc("data-rating");
};
document.querySelector(".sort-desc-pc").onclick = function () {
  mySortAsc("data-spin");
};
document.querySelector(".sort-gift-pc").onclick = function () {
  mySortAsc("data-gift");
};

document.querySelector(".sort-rating-pc").onclick = function () {
  mySortAsc("data-deposit");
};

.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.btn:hover, .dropdown:hover .btn  {
  background-color: #0b7dda;
}
@media (max-width: 1200px) {
  #pc-sort {
    display: none;
  }
}
@media (min-width: 1201px) {
 #mobile-sort {
   display: none;
 }
}

<div id="pc-sort">
  <button class="sort-asc-pc">1</button>
  <button class="sort-desc-pc">2</button>
  <button class="sort-rating-pc">3</button>
  <button class="sort-gift-pc">4</button>
</div>
<div id="mobile-sort">
  <button class="btn">Сортировать</button>
  <div class="dropdown">
    <button class="btn" style="border-left: 1px solid navy">
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <button class="sort-asc">1</button><br />
      <button class="sort-desc">2</button><br />
      <button class="sort-rating">3</button><br />
      <button class="sort-gift">4</button>
    </div>
  </div>
</div>

Answer 1

А покажите, что получается для корректного варианта на винде и для Все сразу съехало?

Обычно дело в том, что на ios перебиваеются стили деволтные от браузера для интерактивных элементов и кнопки входят в их число.

И такое помогает поправить appearance-свойство: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

БЛОГ НА HUSL

Кроссбраузерность для Mac'а

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