Rustam Bainazarov

https://css-tricks.com/aspect-ratio-boxes/

На body вешайте класс .no-pseudo со следующим правилом:

.no-pseudo:before,
.no-pseudo:after,
.no-pseudo *:before,
.no-pseudo *:after {
   content: none !important;
   display: none !important;
}

JS с псевдоэлементами работать не умеет напрямую и полноценно, т. к. это не элементы DOM, поэтому только так.

От легких обрывов анимации при быстром наведении/отведении никуда не деться, ибо мы меняем значение свойства transform-origin, чтобы сделать ваш эффект. Его (transform-origin) в данном случае анимировать не стоит вовсе, иначе вообще вся анимация ломается.

Можно без JS так сделать:



Ну как без JS... там по клику надо будет получать нужный рейтинг.

Общие классы или data-атрибуты добавить нельзя им всем?

Ну а так — что-то наподобие этого как вариант:

$('[class*="slideToggle-"]').on( "click", function() {
  $(this).find('[class*="toggle__content-"]').slideToggle(); 
});

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

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

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

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

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


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


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


~ ~ ~

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


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

Для теста беру сайт OZON'а, который загружает мобильную версию, исходя из user-agent'a, а не по разрешению. Есть несколько способов, но если вкратце и с помощью Chrome или Firefox, то...

Chrome:



Firefox:



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

Если нативно:

Упрощать ваш код с телефона нет желания, но это будет работать.

Кстати, это в целом не очень верно так делать разметку SVG, как у вас. Исправил.



Ну а так, это добавьте, если не хотите разметку менять, тогда заработает:

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

Это вообще типичный сброс стилей для img. И именно из-за его отсутствия у вас эта проблема.

Попробуйте pointer-events: none; добавить к логотипу в CSS. Это отключает элемент для взаимодействия, а клик по нему проходит сквозь него.

Только JS.

Простой плагин для плавной прокрутки:
https://idiotwu.github.io/smooth-scrollbar/

Вроде бы нигде и ничего не ломает. Но тестировал я только в Chrome 50+, Safari 10+ и Firefox 60 и не на body, а в отдельных контейнерах.

* * * * *

А вообще, сейчас плавную прокрутку делают в крупных проектах на GSAP. Вот пример:



* * * * *

Если не нужно плавного скролла, а нужно стилизовать наивный, то вот этот вообще не ломает нативный скроллинг:
https://kingsora.github.io/OverlayScrollbars/#!overview

Вот его демо на странице с iframe:
https://kingsora.github.io/OverlayScrollbars/#!dem...


Я его тестировал за время использования в IE11, Chrome 40+, Firefox 40+, Safari 10+. Всё более чем хорошо. Вышеперечисленные же плагины меняют алгоритм работы нативного скроллинга. Точнее, тупо его его отключают. Этот же ничего не ломает.

* * * * *

P. S. Ну а вообще, скроллинг лучше вообще не трогать нативный, если это просто ради красоты.

Есть ещё много вариантов (clip, mask-image, SVG и т. п.), которые предназначены для более продвинутых эффектов. Этот вариант — самый простой и требует однородного цвета на фон, если логотип прозрачный.

Попробуйте заменить плагин на нормальный.

Например, вот этот отлично работает с динамикой безо всяких лишних взаимодействий:
https://github.com/aFarkas/lazysizes

Он просто следит за появлением новых элементов автоматически. Lazysizes — самый популярный плагин для ленивой загрузки в мире. Поддержка браузеров — начиная с IE10. Если подключить полифил, то будет IE8+. Об этом всём написано на странице проекта.

Вот древнее демо (не моё) того, как сей плагин работает с динамически созданным DOM:


Если не хотите менять плагин — нужно вызывать его инициализацию снова после получения данных и формирования DOM. Или делать модификацию плагина, чтобы он умел следить за новыми объектами.