

サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかります。

下記がコードになります。コンテンツに高さを持たさせるために
AやBといったアルファベット一文字を多用していますが、そこはコンテンツに高さを持たせるためなので気にしないでください。

環境: Mac OS 10.15.5, Chrome Version 88.0.4324.192 (Official Build) (x86_64)

HTML:

[code]

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="css/main-space.css">
    </head>
    
    <body>
        <div class="mainSpace">
            <div class="mainSpaceSide">
                <ul>
                    <li>A</li><li>B</li><li>C</li>
                    <li>D</li><li>E</li><li>F</li>
                    <li>A</li><li>B</li><li>C</li>
                    <li>D</li><li>E</li><li>F</li>
                    <li>A</li><li>B</li><li>C</li>
                    <li>D</li><li>E</li><li>F</li>
                    <li>A</li><li>B</li><li>C</li>
                    <li>D</li><li>E</li><li>F</li>
                    <li>A</li><li>B</li><li>C</li>
                    <li>D</li><li>E</li><li>F</li>
                </ul>
            </div>
            <div class="mainSpaceBody">
                a<br>a<br>a<br>a<br>a<br>a<br>a<br>
                b<br>b<br>b<br>b<br>b<br>b<br>b<br>
                c<br>c<br>c<br>c<br>c<br>c<br>c<br>
                d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                e<br>e<br>e<br>e<br>e<br>e<br>e<br>
                f<br>f<br>f<br>f<br>f<br>f<br>f<br>
            </div>
        </div>
    </body>
    
    </html>
    
[/code]

CSS:

[code]

    .mainSpace {
        min-height: 100vh;
        display: grid;
        grid-template: 
            "a-side a-body" 100vh
        /    320px 1fr;
    }
    .mainSpaceSide {
        grid-area: a-side;
        background-color: blue;
        overflow: scroll;
    }
    .mainSpaceBody {
        grid-area: a-body;
        background-color: green;
        overflow: scroll;
    }
    
[/code]

現象をしめした画像:

[![画像の説明をここに入力](https://i.stack.imgur.com/zR0eL.png)](https://i.stack.imgur.com/zR0eL.png)

また、なんとも形容しがたいのですが、普通のPCサイズでも右側のスクロール範囲を一度全部下までスクロールさせたあと、一番上までスクロールで戻そうとすると、先頭（一番上）で、ひっかかりを感じます。（なので、iPadが顕著に現象がわかるだけで、おそらくなんらかのひっかかりをおこしてしまうよくないコードになっていると思うのですが、原因がわかりません）

また、雑多な情報になってしまいますが、PCでブラウザサイズの横幅を縮めてiPadほどの大きさにしたときはこんなにヒドくひっかかったりしません。なので`viewport`の設定があやしいのではないかとも推測していますが、はっきりしません。

追記:  
iPhoneでも右側を下までスクロールしたあとで、上にスクロールするとひっかかって戻せない事に気づきました。下記にスクリーンショットを記載しますが、スクロールバーが２本出ているのがこの現象を引き起こしていそうな気がするのですが、気がするだけで、CSS的になにが原因でどう修復するかわかっていません。

[![画像の説明をここに入力](https://i.stack.imgur.com/CEQFy.png)](https://i.stack.imgur.com/CEQFy.png)


CC BY-SA 4.0
2021-02-28T12:41:10.640
74323
2021-02-28T13:50:15.477
2021-02-28T13:50:15.477
9008
9008
question
css html5
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかかる。PCサイズでもややひっかかりを感じる。