Добрый день,
на странице присутствует интерактивный элемент. Допустим svg картинка с большим количеством точек.
При скролле страницы некоторые точки должны "всплывать" выше других.
Гугл подсказывает нам такой мануал:
https://www.sitepoint.com/scroll-based-animations-...
Берём из него js и в svg контурам нужных нам точек присваиваем класс допустим ".top"
Svg встраиваем инлайном в html и радуемся всплывающим точкам на всех ПК браузерах (те, что поддерживают анимацию css). (Можно вставить с помощью iframe, но ситуация не поменяется.)
Но с телефонами беда. Точки не всплывают. Вставляем в js алерт и видим, что функции .outerHeight() и .offset().top возвращают 0. Как на iOS, так и на андроиде.
Методом тыка определяем, что параметры тега svg определяется корректно, но к сожалению внутри тега svg мобильные браузеры не могут корректно высчитать высоту и смещение (например для g или path).
Кто-нибудь сталкивался с такой проблемой?
Знаю, что можно svg заменить например на png картинки и круги размещать абсолютным позиционированием. Но данный элемент адаптивный, и не хочется для каждого круга и для разных разрешений расписывать свои значения top, left.
Спасибо!
