Сжатие slick-dots на IOS

Question

Всем привет! У меня есть slick-slider, кастомные slick-dots. На десктопе, на android в любом браузере и симуляторе девайсов от гугл кастомные dots выглядят адекватно, но вот на айфоне они начинают сильно сжиматься. Долгое время не могу понять, в чем проблема, flex-shrink:0 не работает. Помогите разобраться)

.slick-dots {
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.slick-dots li {
    list-style: none;
    margin: 0 5px;
    -ms-flex-negative: 0;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
}

.slick-dots li button {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: none;
    background-color: #fff;
    color: transparent;
    outline: none;
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
}

<ul class="slick-dots">
    <li>
        <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-controls="slick-slide00" aria-label="1 of 4" tabindex="-1">1
        </button>
        <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-controls="slick-slide00" aria-label="1 of 4" tabindex="-1">2
        </button>
        <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-controls="slick-slide00" aria-label="1 of 4" tabindex="-1">3
        </button>
        <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-controls="slick-slide00" aria-label="1 of 4" tabindex="-1">4
        </button>

    </li>
</ul>

Answer 1

Скорее всего дело в кнопках (button) внутри точечной навигации. В safari есть кое-какие стили по умолчанию для них. Как можно победить:

1) Вообще не выводить тег button в разметку, используя свойство customPaging

$('.slider').slick({
  arrows: false,
  dots: true,
  customPaging: function(){return ''}
})

.slide{
  background-color: #cda;
  font-size: 50vh;
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
}
.slide:focus{
  outline: none;
}
.slick-dots{
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slick-dots>li{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #acd;
  margin: 5px;
  flex: 0 0 auto;
}
.slick-dots>.slick-active{
  background-color: #dca;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

Сбросить браузерные стили для кнопки

$('.slider').slick({
  arrows: false,
  dots: true
})

.slide{
  background-color: #cda;
  font-size: 50vh;
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
}
.slide:focus{
  outline: none;
}
.slick-dots{
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slick-dots>li{
  margin: 5px;
  flex: 0 0 auto;
}
.slick-dots button{
  appearance: none;
  -webkit-appearance: none;/*сброс браузерного оформления для кнопки*/
  padding: 0;
  display: block;  
  width: 10px;
  height: 10px;
  border:none;
  font-size: 0; /*т.к. по умолчанию slick-slider пишет номера слайдов в кнопки навигации*/
  border-radius: 50%;
  background-color: #acd;  
}
.slick-active button{
  background-color: #dca;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

БЛОГ НА HUSL

Сжатие slick-dots на IOS

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