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.

[noschang]

I have a similar issue where the scrollbar cannot be dragged.
The cause is the pointer-events: none in the scrollbar.
I managed to solve the issue with the code below. I hope it can help you.

  // Issue: Scroll bar can not be moved with mouse cursor in text area
  //
  // The bug is caused by "pointer-events: none" in the vertical srollbar of code mirror.
  //
  // Here we set the pointer-events to "auto" to fix the issue. However, depending on the
  // interaction with the textarea, code mirror will reset pointer-events back to none,
  // causing the scrollbar to break again.
  //
  // For this reason, we install a mutation observer that checks this style change from
  // code mirror and set the pointer-events to "auto" again if needed.
  #applyScrollbarBugFix(editor) {
    if (this.vScrollbarObserver) {
      this.vScrollbarObserver.disconnect();
      this.vScrollbarObserver = null;
    }

    const vScrollbarElement = editor.codemirror
      .getWrapperElement()
      .querySelector('.CodeMirror-vscrollbar');

    vScrollbarElement.style.pointerEvents = 'auto';

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'style') {
          // Disable observer temporarily to avoid recursive trigger
          observer.disconnect();

          vScrollbarElement.style.pointerEvents = 'auto';

          // Reattach observer to get new style changes
          observer.observe(vScrollbarElement, {
            attributes: true,
            attributeFilter: ['style'],
          });
        }
      });
    });

    observer.observe(vScrollbarElement, {
      attributes: true,
      attributeFilter: ['style'],
    });

    this.vScrollbarObserver = observer;
  }