【CSS】divを同じ位置に表示させてスライドのように切り替える

はじめに

拙稿ですが、safari、およびiOS Safariではこれがうまく動いてくれないのです。

https://maya-pg.net/2020/10/08/%e4%b8%80%e6%9e%9a%e3%81%aehtml%e3%81%a7%e6%93%ac%e4%bc%bc%e7%9a%84%e3%81%ab%e7%94%bb%e9%9d%a2%e9%81%b7%e7%a7%bb%e3%81%95%e3%81%9b%e3%81%a6%e3%81%bf%e3%82%8bspa%e3%81%ae%e5%9f%ba%e7%a4%8e%e3%81%ae/

ブラウザ依存を忘れてました

仕方ないので、display:none;を組み合わせてスライドを重ねる式に変更しました。
CodePenで試しiOS Safariで検証取れたのはこちら。

See the Pen show and hide divs by Maya (@mayarin) on CodePen.