1

When scrolling through content in a scroll container with the scroll-snap-align property applied to the children, I was able to create this jarring/janky effect with children elements that have a transform property applied on hover.

Running example code here!

HTML

<div class="app-container">
  <h1>Card Container:</h1>
    <div class="scroll-container">
      <div class="card">card 1</div>
      <div class="card">card 2</div>
      <div class="card">card 3</div>
      <div class="card">card 4</div>
      <div class="card">card 5</div>
      <div class="card">card 6</div>
      <div class="card">card 7</div>
      <div class="card">card 8</div>
      <div class="card">card 9</div>
      <div class="card">card 10</div>
    </div>
</div>

CSS

.card {
  border-radius: 12px;
  background-color: lightgrey;
  height: 150px;
  width: 250px;
  border: black solid 3px;
  display: grid;
  place-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  transition: 0.3s;
  user-select: none;
  scroll-snap-align: center;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
}

.scroll-container {
  width: 350px;
  height: 275px;
  border: black solid 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: scroll;
  gap: 20px;
  scroll-snap-type: y mandatory;
}

.app-container {
  display: grid;
  place-content: center;
  height: 100vh;
  width: 100vw;
}

This seems to happen in Chromium browsers (tested in Chrome, Brave, and Edge), and appears to work completely fine in Firefox. I have not tested Safari.

Wondering if this is a known quirk/bug with scroll containers in Chromium browsers or if there exists some sort of solution for this problem.

kdmaz
  • 21
  • 1
  • 1
  • 1
    I think I am seeing what you're talking about. I tried scroll-behavior: smooth; and it still looked the same. I checked Chrome and Edge. I think really why it looks so prominent is because the bottom and top of the prev and next card are visible so you see more of the animation stop, also, its such a short distance to snap it appears more "janky". I'll keep messing and see if I can come up with something. – KnightTheLion Jan 13 '23 at 04:08

0 Answers0