Hide scroll bars on iOS

[toniengelhardt]

Hide scroll bars on iOS

[RyanPaulGannon]

Getting nowhere with this currently.

I've tried adding the following code

{
  scrollbar-width: none !important; // Firefox
  -ms-overflow-style: none !important; // IE and Edge
  &::-webkit-scrollbar {
    // Chrome, Safari, Opera
    display: none !important;
    -webkit-appearance: none !important;
  }
}

To app.vue as body, :root and .container. Also tried to use @media (max-640px) and @media (pointer: coarse).

In assets/styles.css the same tests, I can get the scrollbar to disappear in Brave when using their emulator. But when testing using ngrok on my iPhone 13 Pro Max, it always appears. (Unsure if it's a native software issue, bug or what at present). Presumed some css maybe overriding, but as far as I'm aware I've avoided this.

[toniengelhardt]

No worries, I think it's maybe not possible on iOS. Apple is doing some weird stuff sometimes with their browser, e.g. input behavior, etc.

I'll test it on Android.

[toniengelhardt]

On Android it works, so I renamed the issue to be iOS specific.

[RyanPaulGannon]

Okay that's good. It works with the current code? Or did you add the code block above for testing?

[toniengelhardt]

Current code. But I'm on Chrome, will add the compat code for Firefox and Edge as well.