Я использую Flickity для реализации ползунка asNavFor, примерно так .
Я интегрировал это в WordPress и ACF . Используя поле повторителя, администратор имеет возможность создавать неограниченное количество слайдов. Это означает, что я должен определить ширину для каждого .nav-item встроенного по сравнению с внешней таблицей стилей.
Вот как это выглядит в PHP:
<div class="nav-item" style="width:<?= (100 / count(get_field('tabs_builder')) ); ?>%"><span>Slide One</span></div>
PHP здесь подсчитывает, сколько слайдов ACFсуществует, а затем разделите его на 100. В моем примере это даст ширину строки в 20%.
Это хорошо работает в современных браузерах. Вот как это выглядит:
Однако в IE11 иногда это выглядит так:
При неправильном отображении ширина встроенного стиля для .nav-item является правильной и отображает 20%. .flickity-viewport высота неверна на 40px. transform: translateX(7.6%) должно быть 0%.
Я не могу повторить ошибку, используя эту CodePen отладочную версию .
Может ли это быть из-за того, что страница не загружает PHP вовремя для расчета ширины? Что может быть альтернативным решением для расчета ширины элементов навигации?
Вот живая версия сайта.