Why does transform scale on iPhone not work well on scroll?

Question

css

Good day. In general, the problem was uploaded to 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 = ``
    }
  }
},

Each card has position: sticky and top: 0. Everything is fine on desktop and android, but I don’t know what to do with safari, I would be grateful for your help.

Answer 1

In short, it is unlikely that anyone will encounter the same problem, but I found a solution - in safari, the value of card.top at some point for some reason became greater than 0, so I set card.top <= 50 in the condition and the bug went away .