Rustam Bainazarov

Это баг рендеринга в Safari из-за overflow, opacity и т. п.

Я решал так, например:

/* Добавляем к этому правилу следующее */
.checkout .checkout-form .info-container.visible {
    transform: translateZ(0);
}

Попробуйте.

Можно ещё всякой ерудны сделать простой (что-то лучше и.сложнее — это к SVG или, например, Rive), но для полного контроля всё равно понадобится JS:


Даже без каких-то сложных конструкций с SVG удобно работать через CSS для простых анимаций:

Так, например:



Не зависит от высоты изображения.

С помощью только CSS — никак в таком виде. CSS не умеет трансформировать форматы цветов. Очевидно, что внутри RGBA должен быть цвет в формате RGB.

Поэтому только так:



Если через SASS, то можно конвертировать HEX в RGB с его помощью а-ля так (лучше отдельную функцию использовать)

Outline закруглить можно только в Firefox.

Такую штуку, как у вас, в силу ограничений кроссбраузерной стилизации outline, делают с помощью, например, отдельного элемента (псевдоэлемента):

Я уже и забыл, что это есть.

Код скриншотами никто не высылает.

Вот так, например:

Ваши ссылки перекрываются псевдоэлементами figure. Хоть они и прозрачные, но они лежат поверх ссылок, т. к. имеют габариты всего блока figure, поэтому клик по ним идёт. Чтобы сделать блок невидимым для клика, нужно добавить ему pointer-events: none:



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

«Выучили» HTML и CSS, а задаёте вопрос на уровне людей, которые никогда не слышали ни о чём подобном. Мда… зачем разбрасываться словами? К сожалению, вы вообще ничего не знаете на данный момент, если для вас даже тег <a> — это целая мистерия.

Есть макет, который нарисован где угодно. На основании этого макета и делается вёрстка, т. е. макет воплощается в коде.

Повтора template пока что нет, поэтому на nth-child элементов объединяем колонки.

$(document).ready(function() {
    if ($(".backgroung_prodyct_brow .products_item").length) {
        $(".backgroung_prodyct_brow").show();
    } else {
        $(".backgroung_prodyct_brow").hide();
    }
});

Минимальная ширина просто для примера, чтобы был виден вылет вверх на мобильных, для них нужно просто через media подгонять ширину блока с текстом, что мне делать лень.

#lst {
   display: flex;
   flex-flow: column wrap;
   max-height: высота нужная;
}

Или

#lst {
   column-count: 3;
}

Я бы так, например:

.info-slider
.info-slider__item
.info-slider__item-photo
.info-slider__item-photo-preview или .info-slider__item-preview
.info-slider__item-name

Можно короче:

.info-slider
.info-slider__item
.info-slider__photo
.info-slider__preview
.info-slider__name

Причины описал в комментариях к CSS.

Работает только в достаточно новых браузерах:
https://developer.mozilla.org/en-US/docs/Web/API/N...

navigator.share({
    title: 'Дратути!', // Заголовок
    text: 'Здарова, бандиты!', // Текст
    url: 'https://bandits.org', // ссылка
  });

Текущая ссылка и title:


Свои параметры:


На примере data-атрибутов:


~ ~ ~

Всё это вызывает сие меню:


И весьма недурно отправляет, например, в Telegram:

Лично я использовал https://joshuajohnson.co.uk/Choices в последних проектах. Нет зависимостей, работает быстро.

Например, вот так он работает с 500 select'ами, которые я генерирую не очень правильным способом динамически при загрузке страницы, то есть это весьма тяжелая процедура:

Ломается верстка, потому что вы вложили тег <a> в тег <a>. Что приводит к ошибки построения DOM, т. к. это запрещено (ну и весьма логично, кстати, почему это запрещено).

Сделайте так, и ничего не будет ломаться:



Пользуйтесь валидатором в таком случае. Он 99% подскажет вам, куда копать: