We have a Web Application that displays a scroll bar for users to navigate through the content.
The scroll bar functions correctly on desktop browsers and Android browsers, but not on Apple devices running iOS 15 (Safari Browser).
Current Behavior :
In Apple Safari Browser on iOS 15, the scroll bar only appears when the user touches the screen and scrolls UP/DOWN, which is the default behavior for iOS.
Expected Behavior:
The scroll bar should be visible by default without requiring any user interactions.
I have tried the following code. It works on iOS devices running Safari up to version 14, but not on iOS 15.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
.frame::-webkit-scrollbar {
-webkit-appearance: none;
width: 2px;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}<!DOCTYPE html>
<html>
<body>
<div class="frame">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>