iOS/Safari: Vertical scrollbar broken with many wrapped lines

[personalizedrefrigerator]

Describe the issue

Long-pressing and dragging the vertical scrollbar on iOS causes the document to start scrolling, then jump back to its original position.

This only seems to happen when line wrapping is enabled -- compare https://personalizedrefrigerator.github.io/personalSite/demos/codemirror_ios_scrolling/ with https://personalizedrefrigerator.github.io/personalSite/demos/codemirror_ios_scrolling/?no-wrap .

Firefox on Linux seems to also have trouble scrolling to the end of a document when line wrapping is enabled — dragging the scrollbar from the top of the editor to the end does not scroll to the last line.

Browser and platform

Safari on iOS 17.0.2

Reproduction link

https://codemirror.net/try/?c=aW1wb3J0IHtFZGl0b3JWaWV3LCBiYXNpY1NldHVwfSBmcm9tICJjb2RlbWlycm9yIjsKCmNvbnN0IGh1Z2VEb2NMaW5lcyA9IFsKICAgICdUaGlzIGlzIGEgdmVyeSBsb25nIGRvY3VtZW50LiBUcnkgZHJhZ2dpbmcgdGhlIHZlcnRpY2FsIHNjcm9sbGJhciBvbiBpT1MuJwpdOwoKZm9yIChsZXQgaSA9IDA7IGkgPCAxMF8wMDA7IGkrKykgewogICAgaHVnZURvY0xpbmVzLnB1c2goCiAgICAgICAgYExpbmUgJHtpfS4gSXQgc2VlbXMgdGhhdCBsaW5lcyBtYXkgbmVlZCB0byBiZSBsb25nIGVub3VnaCB0byB3cmFwIHRvIHRyaWdnZXIgdGhlIGJ1Zy4gYCArIAogICAgICAgIGBBcyBzdWNoLCBlYWNoIGxpbmUgaXMgbG9uZy4gTG9uZyBlbm91Z2ggdG8gY2F1c2UgdGhlIGxpbmUgdG8gd3JhcC4gYCArCiAgICAgICAgYEl0IHNlZW1zIHRoYXQgdGhpcyBtaWdodCBub3QgYmUgYW4gaXNzdWUgb24ganVzdCBpT1MgLS0gRmlyZWZveCBvbiBMaW51eCBhbHNvIHNlZW1zIHRvIGAgKwogICAgICAgIGBoYXZlIHRyb3VibGUgd2hlbiBkcmFnZ2luZyB0aGUgc2Nyb2xsIGJhci5gKTsKfQoKCm5ldyBFZGl0b3JWaWV3KHsKICAgIGRvYzogaHVnZURvY0xpbmVzLmpvaW4oJ1xuJyksCiAgICBleHRlbnNpb25zOiBbCiAgICAgICAgYmFzaWNTZXR1cCwKICAgICAgICBFZGl0b3JWaWV3LmxpbmVXcmFwcGluZywKICAgICAgICBFZGl0b3JWaWV3LnRoZW1lKHsKICAgICAgICAgICAgJyYgLmNtLXNjcm9sbGVyJzogewogICAgICAgICAgICAgICAgaGVpZ2h0OiAnNjB2aCcsCiAgICAgICAgICAgICAgICAnb3ZlcmZsb3cteSc6ICdhdXRvJywKICAgICAgICAgICAgfSwKICAgICAgICB9KSwKICAgIF0sCiAgICBwYXJlbnQ6IGRvY3VtZW50LmJvZHksCn0pOw==

[personalizedrefrigerator]

The attached video shows an attempt to drag the vertical scrollbar in a line-wrapped document. Notice that almost immediately after a drag attempt starts, the scrollbar jumps back to the original position:

demo.mp4

[marijnh]

[deleted comment added to wrong issue]

[marijnh]

My iOS (16.6.1) doesn't show a scroll bar on scrollable elements in Safari. Is there some setting I should turn on for this?

[personalizedrefrigerator]

My iOS (16.6.1) doesn't show a scroll bar on scrollable elements in Safari. Is there some setting I should turn on for this?

On my device (iOS 17.1.1), the scrollbar is visible, but only

1. While scrolling a scrollable element
2. For a short amount of time after scrolling
3. While dragging the scrollbar (after a long press).

According to Apple's release notes, this has been available since iOS 13.¹

This also seems to be the case with the virtual iOS device provided by Expo's React Native online playground. However, scrolling behavior seems different after long-pressing on the scrollbar (perhaps because I'm dragging the scrollbar with a mouse).

Footnotes

1. https://support.apple.com/en-us/HT210393 (cmd+f search for "Scrollbar scrubbing") ↩

[marijnh]

Hm, I'm really not getting any scrollbar at all on scrollable elements when I swipe-scroll them.

[personalizedrefrigerator]

Strange... In that case, I can look into fixing this. (I hope to have time this weekend).

[marijnh]

I can reproduce the Firefox issue. It seems that when you start dragging, it stops updating the scrollbar height, so if the rendered content turns out to be higher than the initial estimation, and the editor renders its content bigger than it was at the start of the drag, you still can't drag down to the bottom of the new height. I haven't found a practical workaround for that yet though.