滾動條在 IOS 15 Safari 中的 flexbox 中變得不可見並溢出：auto

Question

編輯： overflow: auto足以使滾動條不可見。
編輯 2：看起來像Safari 的副本：可滾動 div 中的滾動條顏色錯誤

為什么 linux 上的 firefox 在以下文本框中顯示滾動條，而 IOS 15 上的 Safari 卻沒有？ （刪除display: flex或overflow: auto使滾動條再次可見）。

我怎樣才能讓它在 IOS Safari 上也可見？

 height: 200px; width: 300px; overflow: auto;

 <p id="tbox"> LLorem ipsum dolor sit amet, consectetur adipiscing elit. In eu odio sit amet elit molestie fringilla. Maecenas vitae nunc quis diam finibus laoreet sed sed justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere arcu orci, ut fermentum lectus vehicula sed. Suspendisse potenti. Integer venenatis diam erat, in maximus mauris varius nec. Nunc eget ante urna. Quisque at ullamcorper tortor. Proin pharetra scelerisque ante, quis tempus tellus interdum eget. Duis eget tellus at tellus sagittis eleifend auctor ut dolor. Aenean eget sodales metus, nec luctus metus. Maecenas turpis lorem, condimentum in diam non, lobortis molestie nunc. Vivamus et lacus eu odio ultrices molestie. Etiam auctor pharetra fringilla. Nulla placerat ultricies risus, eget ultricies dolor volutpat vitae. Aliquam auctor suscipit eros et bibendum. Pellentesque lectus metus, dignissim vel sodales ut, dignissim et augue. </p>

Answer 1

我嘗試了多種組合，現在我想我可能會找到原因：移動 safari 有一個錯誤的錯誤，它不會以某種方式將滾動條顏色更改為更獨特的顏色。

如果您嘗試將背景顏色更改為與白色稍有不同的顏色，您可以看到滾動條。

body {
background: black;
}

body {
background: rgb(255,235,255);
}

以上是調整背景顏色的兩個示例。 但是，（！！）如果您使用媒體查詢@media (prefers-color-scheme: light)並傳遞淺色，它會神奇地呈現深色滾動條！ （見 這里的例子，我試圖刪除我在這個例子中使用的所有其他 css 樣式，但沒有任何改變。）相反，在 macOS 版本的 Safari 上，當背景很暗時，你幾乎看不到滾動條。

---------編輯注釋---------

11-07-2022：抱歉，我沒有注意到自動更正將 rgb 更改為 Rob。

12-07-2022：更新鏈接以增強可滾動性：

1. 將#wrapper的高度從200px更改為30vh
2. 將p元素重復三次以實現更長的滾動。