Почему transform scale на iPhone плохо работает при прокрутке?

Question

[daniel_wesson]

Доброго времени суток. В общем, проблему залил на yt

const projectsCards = document.querySelectorAll('.projects-preview__item')

document.addEventListener('scroll', (e) => {
	this.stickyProjectCard(projectsCards, e)
})

stickyProjectCard (cards, e) {
  for (const $card of cards) {
    const card = $card.getBoundingClientRect()
    const height = card.height
    const scroll = this.getWindowScroll()
    const offsetTop = $card.dataset.offset || (scroll + card.top)
    $card.dataset.offset = offsetTop

    if (card.top <= 0) {
      let scale = 1 - Math.abs((scroll - offsetTop)/(card.height*6))
      scale = Math.max(scale, 0)
      $card.querySelector('.item-wrapper').style.transform = `scale(${scale}) translateZ(0)`
    } else {
      $card.querySelector('.item-wrapper').style.transform = ``
    }
  }
},

У каждой карточки position: sticky и top: 0. На десктопе и андроиде всё хорошо, а вот с safari не знаю что и делать, буду признателен за помощь.

Answer 1

[daniel_wesson]

Короче, вряд ли кто-то столкнется с такой же проблемой, но решение Я нашел - в сафари значение card.top в какой-то момент почему-то становилось больше 0, поэтому Я поставил в условии card.top <= 50 и баг ушел.