◆ -webkit-overflow-scrolling をつけると範囲外表示できないバグがあった
◆ 今も直ってない
◆ だけどなくてもデフォルトでなめらかにスクロールするから付ける必要がなくなった

-webkit-overflow-scrolling

以前の iOS ではページ全体のスクロールはなめらかでしたが要素内のスクロールはすごくカクカクしてました
要素内のスクロールは 適当な要素に overflow: scroll をつけて要素内でスクロール可能にしたものです

それの対処方法に -webkit-overflow-scrolling: touch を指定するというのがあります
これを指定すると要素内のスクロールでもなめらかにできました

しかし このスタイルにはバグが多いと報告されていて 私が困ったものだと このスタイルをつけた要素の外側に描画できないというものがあります
スクロールエリアの中の要素で position: fixed を使って画面全体にダイアログ表示するなどすると スクロールエリアの外側が表示されません

通常はこう表示されるものが

ios-scroll-bug02

こうなります

ios-scroll-bug01

このページの HTML はこれです
プレビューから実際に確認できます

<!doctype html>
<meta name="viewport" content="width=1000">

<style>
	#window {
		width: 400px;
		height: 300px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		margin: 100px auto;
		border: 1px solid silver;
	}

	li {
		height: 40px;
		border-bottom: 1px solid #f0f0f0;
	}

	:checked+.detail {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
	}

	.body {
		width: 700px;
		margin: 30px auto;
		padding: 20px;
		background: white;
		font-size: 30px;
	}
</style>

<div id="window">
	<ul>
		<template id="tpl">
			<li>
				<span class="text">text text text text text...</span>
				<button class="button">Detail</button>
				<input type="checkbox" hidden>
				<div class="detail" hidden>
					<div class="body">
						ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
						ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
						ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
						ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
					</div>
				</div>
			</li>
		</template>
	</ul>
</div>

<script>
	const tpl = document.querySelector("#tpl")
	for (let i = 0; i < 20; i++) {
		tpl.parentElement.append(tpl.content.cloneNode(true))
	}

	document.querySelector("#window").onclick = eve => {
		if (eve.target.classList.contains("button")) {
			const input = eve.target.nextElementSibling
			input.checked = !input.checked
		}
		if(eve.target.closest(".detail")){
			const dt = eve.target.closest(".detail")
			dt.previousElementSibling.checked = false
		}
	}
</script>

いらなくなってる

前回確認したのはたしか iOS 11 くらいの頃でした
そろそろ直ってないか iPadOS 13.3 で確認してみると このバグは相変わらずでした

しかし -webkit-overflow-scrolling: touch の指定がなくてもなめらかにスクロールするようになっています
デフォルトでなめらかスクロールなのでこのスタイルは不要です
外せばバグも起きずうまく動きます

確認は iPadOS なので 普通の iOS でも直ってるかは未確認です


ちなみに要素内スクロールがカクカクするのは iOS でだけ発生していて Android だと問題なくスクロールできます
Android ではこの CSS 自体がありません