iOS/Safari: Vertical scrollbar broken with many wrapped lines

personalizedrefrigerator commented

2023-10-06 22:50:23 +02:00

(Migrated from github.com)

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==

### 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 commented

2023-10-06 22:56:21 +02:00

(Migrated from github.com)

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:

https://github.com/codemirror/dev/assets/46334387/4f0494d8-d205-422c-aecc-e3aced3956f1

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: https://github.com/codemirror/dev/assets/46334387/4f0494d8-d205-422c-aecc-e3aced3956f1

marijnh commented

2023-11-29 10:29:56 +01:00

(Migrated from github.com)

[deleted comment added to wrong issue]

marijnh commented

2023-11-30 09:56:28 +01:00

(Migrated from github.com)

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 commented

2023-11-30 13:54:45 +01:00

(Migrated from github.com)

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

While scrolling a scrollable element
For a short amount of time after scrolling
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).

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

> 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.[^1] This also seems to be the case with the [virtual iOS device](https://snack.expo.dev/@personalizedrefrigerator/codemirror-6-ios-safari-bug-report) 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). [^1]: https://support.apple.com/en-us/HT210393 (cmd+f search for "Scrollbar scrubbing")

marijnh commented

2023-11-30 14:50:03 +01:00

(Migrated from github.com)

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

personalizedrefrigerator commented

2023-11-30 14:57:17 +01:00

(Migrated from github.com)

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

marijnh commented

2023-11-30 14:59:13 +01:00

(Migrated from github.com)

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.

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 commented

2025-04-03 02:18:42 +02:00

(Migrated from github.com)

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;
  }

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; } ```

Rows
Columns

iOS/Safari: Vertical scrollbar broken with many wrapped lines #1278

Describe the issue

Browser and platform

Reproduction link