I’m styling a web page that has to work across all modern commercial devices and I’m amazed about how hard this single problem is. My page and most of the elements within it have a white background, therefore, when viewed on iPhone with dark mode enabled the scrollbar is entirely not visible, as it is composed of only a white thumb. The page scrollbar is actually correctly dark, but I have some divs and fields that can be scrolled where it stays white no matter the text or background color.

In Chrome this works by default (see screenshots). Text that does not fit is automatically hidden. But in Safari and Mozilla it does not. Please help

This code is working properly in chrome & firefox; not in safari.
https://jsfiddle.net/xurzy8a5/