Ошибка Safari nth-child

Question

Я пишу отзывчивый сайт Wordpress. Я использую шаблон темы костей. Система сетки в целом работала довольно хорошо на большинстве сайтов, но я обнаружил, что для конкретной страницы мне нужно различное количество столбцов на разных размерах экрана.

Чтобы сделать это, я использовал немного, что СКС выглядит следующим образом:

(base media query) 
section{ 
     display:table; 
     float:left; 
     margin-left:0; 
     width:100%; 
} 

(media query for 768 px and above) 
section{ 
     height:150px; 
     width:48.618784527%; 
     &:nth-child(3n+1), &:nth-child(2n){ 
       margin-left:2.76243%; 
     } 
     &:nth-child(2n+1){ 
      margin-left:0; 
     } 
     text-align:right; 
} 
(media query for 1030px and above) 
.pracareas{ 
     section{ 
       width:31.491712705%; 

       &:nth-child(2n+1){ 
         margin-left:2.76243%; 
       } 
       &:nth-child(3n+1){ 
         margin-left:0; 
       } 
     } 
} 

И HTML, как этот

<div class="pracareas"> 
    <section>... content</section> 
    <section>... content</section> 
    <section>... content</section> 
    <section>... content</section> 
</div> 

Это прекрасно работает на настольном браузере и Android. Но на сафари я получаю что-то вроде этого:

Что действительно странно, что, если я обновить и/или вращать Ipad в портретном или наоборот, я получаю это:

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

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

Answer 1

Это потому, что не все браузеры отображают десятичные значения ширины в процентах одинаково.

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

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

Смотреть это: Are the decimal places in a CSS width respected?

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