Rustam Bainazarov

Можно даже без классов модификаторов, тупо на nth-child:


Если нужно вставлять именно img и если соотношение сторон картинок будет известно заранее, то вот, чтобы размеры по высоте не скакали до загрузки картинок:

Проверяйте ваш CSS.

Таких проблем с простейшим свойством color никогда не было в Safari (и не только). Так что ищите проблему в CSS. Что-то переопределяет нужные вам свойства.

Скриншот результата работы вашего примера кода в iOS Safari. Закономерно — все в полном порядке:

А-ля и вуаля:


Поставьте вашу картинку нормальную и подгоните проценты позиционирования элементов.

Поверх блока с видео на абсолютном позиционировании нужно разместить фото вашего телефона и обязательно (!) задать этому блоку свойство pointer-events: none;, чтобы клики проходили сквозь картинку и добирались до самого iframe.

Плюс, посмотрите на используемый хак для соотношения сторон более внимательно. У вас соотношение сторон стоит 16:9 в коде (56,25%), а у iPhone X — 18:9 (50%).

Если есть контент, который должен «плавать» внутри непосредственного родительского блока без сложной логики этого действия, то можно использовать position: sticky;. Но он поддерживается не всеми браузерами.

Для условной автоматизации этого дела есть хороший плагин https://dollarshaveclub.github.io/stickybits — там, где нет sticky, он сделает с помощью fixed и наоборот.

position: sticky; хорош тем, что он не добавляет никаких слушателей прокруток и т. п., что положительно сказывается на производительности страницы.

P. S. Но без JS не обойтись вовсе, если нужно добавить логику по типу «если плавающий элемент доходит до какого-то элемента внутри общего родительского блока, то сделать то-то, то-то».

Плюс механизм сокрытия тени, когда достигнут последний слайд:
UPDATE. Только надо доработать, если нужно, чтобы тень снова появлялась! Увы, времени нет, чтобы разобраться, но это возможно :))

Такое CSS-решение не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

То же самое, что и здесь:
При нажатии кнопки выделяется текст?

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Вот так нужно вам? Хак соотношения сторон. У вас тупо соотношение сторон не соблюдается, оттуда и полосы сверху (пустое пространство). Решение на CSS только такое есть.



Встраивается в разметку это дело довольно просто:


Можно что-то типа такого сделать, если заняться нечем, главное -- не управлять высотой родительского блока iframe'а, у которого этот хак используется :))

Можно для полного прикола вот так сделать:

Вообще, лучше это делать с помощью SVG.

Если нужно на CSS — то вот, но читай комментарии. Там ряд хаков используется. Сжимай окно по ширине, чтобы увидеть, что блоки текста сохраняют свои размеры и позиционирование относительно общего родителя:

Вызывайте иконку из внешнего файла спрайта на сервере:

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- путь до файла спрайта + ID нужной иконки в нем -->
    <use xlink:href=assets/sprite.svg#sprite-icon-1"></use>
</svg>

Безо всяких JS такого, как у вас толка. В DOM будет встроена только конкретно вызванная иконка из внешнего файла. При этом кеширование тоже будет работать.

Не работает из коробки в IE11 и ранних версиях EDGE, но для них есть полифил:
https://github.com/jonathantneal/svg4everybody

https://css-tricks.com/almanac/properties/b/break-...
Не использовать классы Bootstrap'a (.col-md-6.col-12), а делить общий блок на колонки с помощью column-count: 2, break-inside: avoid и column-gap: XXXpx.

.property-wraper .row {
    /* отступ */
    column-count: 2;  /* количество колонок */
    column-gap: 20px; /* отступ между колонками */
    display: block;   /* с flex ибо не работает */
    padding: 0 20px;  /* отступ по бокам до контента */
}

Плюс, убрать жесткую высоту 30px у <td>, заданную inline, а также все стили :nth-child.

Выйдет так:

Проблема из-за того, что Isotope не дожидается загрузки изображения, которое формирует габариты, и начинает строить сетку.

Можно сделать на хаке соотношения сторон и абсолютно позиционированной картинки. Это нужно, чтобы габариты блоков изначально были просчитаны с помощью CSS и не зависели от скорости прогрузки картинок. В итоге, у Isotope будет вся нужная информация заранее. И ошибка в расчетах из-за отсутствия габаритов не будет иметь место.

Вот рабочий пример. Для пущего эффекта вообще с твоей картинкой и адаптивностью. Сжимай окно — все будет адаптироваться и пересчитываться. И это с учетом абсолютно позиционированной картинки внутри и flex-разметкой:

.grid {
  display: flex;
  flex-flow: row wrap;
}

.element-item {
  flex: 0 0;
  width: calc(20% - 10px);
  margin: 0 0 10px 0;
  position: relative;
}

.element-item:before {
  /* формирователь соотношения сторон + задает габариты, которые будет считать Isotope */
  content: "";
  padding-bottom: 141.3242%; /* процентное соотношение сторон картинок */
  display: block;
}

.element-item img {
  /* картинка на абсолюте, как видишь */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.element-item p,
.element-item h3 {
  /* скрываем тексты внутри, они для сортировки нужен только (код инициализации из их официального примера просто */
  display: none;
}

/* адаптивность */
@media (min-width: 768px) and (max-width: 1200px) {
  .element-item {
    width: calc(25% - 10px);
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  .element-item {
    width: calc(33.333% - 10px);
  }
}

@media (max-width: 399px) {
  .element-item {
    width: calc(50% - 10px);
  }
}

Проблема в CSS. Забавные конструкции типа not() тут не нужны, потому что у вас тупо исключается применение нужных стилей, если элемент либо активный, либо в фокусе. Не знаю, зачем это вообще, нужно так:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  opacity: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Вот пример, который можно открыть в IE11 в режиме чтения по ссылке для проверки:

Анимация тут не нужна + вы фоновый рисунок задаете только на состояние :checked. Соответственно, если его нет, то и фоновая картинка мгновенно убирается, потому что это не анимируемое свойство в принципе (background-image). Нужно изначально задать все стили, потом уже использовать анимируемые свойства (opacity, transform).

Нашёл костыль для решения проблемы:
https://github.com/jquery/jquery-mobile/issues/3700

Потому что внутри table браузер генерирует tbody, даже если вы его не прописали сами, поэтому так:
table > tbody > tr > td

На всякий случай напоминаю, что это можно сделать автоматически тупо на CSS (CSS Counter with Decimal Leading Zero):



На JS можно так (спасибо Интернету):

Гайд по ссылке помогает получить доп. баллы от Google и в целом доп. увеличить скорость рендеринга сайта. Данный гайд при этом не является панацеей от данной ошибки, но скорость первичного отображения сайта как таковая от следования ему только увеличивается.

Появление данной ошибки в случае соблюдения всех рекомендаций и оптимизаций — скорее всего является недоработкой алгоритмов.