iOS 14 and browser scroll bars (webkit)

Question

Created Dec ’20

Replies 6

Boosts 1

Views 16k

Participants 9

Hello!

I have this scrollable container. It works fine across browsers and devices until it hits iOS14. Behaves just the way it should iOS 12 - (cant test iOS13 right now)

The goal is to always show the scrollbar. On iOS14 only the native scrollbar is shown when scrolling is happening.

Is there any way to fix this for iOS14 users?

thanks in advance!

Code Block 
div {  
	max-height: 20rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 0.25rem;
  ::-webkit-scrollbar-track {
    border-radius: 0.125rem;
    background-color: lightgray;
  }
  ::-webkit-scrollbar {
    width: 0.25rem;
    border-radius: 0.125rem;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    background-color: gray;};
  }
}

Answered by Frameworks Engineer in 654532022

Custom scrollbars are no longer supported in iOS 14.

Boost

Answer 1

Frameworks Engineer OP

Apple

Dec ’20

Accepted Answer

Custom scrollbars are no longer supported in iOS 14.

1

Answer 2

saschavino OP

Dec ’20

Thanks!

1

Answer 3

Maedreth OP

Jan ’21

Thank you for your answer Frameworks Engineer, because I have wasted a lot of time looking for the answer to this, with no hits from Apple docs/release notes.

Is there any place we can check so we aren't blindsided by such heavy handed, egregious regressions?

For now the mainstay has become, "use Chrome"

1

Answer 4

mrmernan OP

Oct ’21

Sheeeesh! really!?!?!?!

2

Answer 5

lfk29m OP

Mar ’22

it suck

1

Answer 6

jpdean OP

Jul ’22

Does anyone have a solution for this, then? How can we implement a non-custom scroll on iOS?

We would like to show the scrollbar all the time as we have a scrollable table and touch inputs tend to select cells/rows of that table rather than allowing for a scroll.

0