overflow-scrollingを親要素に指定したときのサンプル
See the Pen 親要素にoverflow-scrollingがあると、子要素のfixedがiPhone実機で効かなくなる by takapen (@takapen) on CodePen.
-webkit-overflow-scrolling: touch; overflow-scrolling: touch;
flex使って簡単な横スライドを作ったときにoverflow-scrollingが必要ですが、これを指定すると子要素、孫要素にあるモーダルに使いたいfixedがおかしくなります。
htmlの構造を変えてモーダルを外に出すしかないですかね..。
祖先要素にtransform: none以外が設定してあると、内包されてるfixedがおかしくなります。
slickとかswiperなどの横スライド系プラグインはtransform: translateとかでずらして表示しているので、だめでした。
なんとかhtmlの構造を変えるか、ボタン押したらtransform: translate3dをローカルストレージに入れてtransform: noneに書き換えて、閉じる押したらさっきのローカルストレージの値を上書きする、とかですかね..。
