overflow: scrollで常にスクロールバーが表示されるわけではないという話（は？）

こんにちは。ブイブイ言わせてますか？私はしてません

まずこれを見てください

コードとしては次のようになっています

function App() {
  return (
    <>
      <div
        css={css`
        width: 100px;
        height: 100px;
        border: 1px solid black;
      `}
      >
        superawesometext
      </div>
    </>
  );
}

要素が飛び出ていますね！だいたいの場合は困るので、cssのoverflowを設定して対処する場合がほとんどだと思います。
そこで、overflow: scrollを設定したときに、環境によっては意図しない結果になる場合があります。
たとえば、次のように：

overflow: scrollがついていますが、スクロールバーが表示されません。（スクロールはできます）
MDN上では次のように書かれているので、ちょっと不審ですね。

ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。

この現象はブラウザーによりません。（前述のスクリーンショットはすべてchromeです）

firefox

safari

結果からいえば、これはOSの設定に依存しています。筆者はmacOS Sonoma 14.4.1にしており、デフォルト設定だとこのような状態になると思います。

この、「スクロールバーを表示：スクロール時に表示」と設定していると、CSSの設定を貫通してスクロールバーが表示されなくなります（2024/4/9現状）。バグかもしれません。
回避方法は色々試しましたが、効果のあるコードができなかったので、現状ではOSの設定を変更しない限り回避できなさそうです。（さらに言えば、これがOSのデフォルト設定の可能性もあるので、厳しい…）
あとは、カスタムスクロールバーを作るぐらいしかなさそうです。嫌ですね

以上、macOSつらいという話でした。ユーザーのみなさんはUbuntuを使ってください。終わり