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

Activity

1. personalizedrefrigerator

   changed the title [-]iOS/Safari: Line wrap breaks vertical scrollbar[/-] [+]iOS/Safari: Vertical scrollbar broken with many wrapped lines [/+] on Oct 6, 2023
2. personalizedrefrigerator commented on Oct 6, 2023

   

   personalizedrefrigerator

   on Oct 6, 2023

   Last edited by personalizedrefrigerator

   Author

   More actions

   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
3. marijnh commented on Nov 29, 2023

   

   marijnh

   on Nov 29, 2023

   Last edited by marijnh

   Member

   More actions

   [deleted comment added to wrong issue]
4. marijnh commented on Nov 30, 2023

   

   marijnh

   on Nov 30, 2023

   Member

   More actions

   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?
5. personalizedrefrigerator commented on Nov 30, 2023

   

   personalizedrefrigerator

   on Nov 30, 2023

   Author

   More actions

   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") ↩
6. marijnh commented on Nov 30, 2023

   

   marijnh

   on Nov 30, 2023

   Member

   More actions

   Hm, I'm really not getting any scrollbar at all on scrollable elements when I swipe-scroll them.
7. personalizedrefrigerator commented on Nov 30, 2023

   

   personalizedrefrigerator

   on Nov 30, 2023

   Author

   More actions

   Strange... In that case, I can look into fixing this. (I hope to have time this weekend).
8. marijnh commented on Nov 30, 2023

   

   marijnh

   on Nov 30, 2023

   Member

   More actions

   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.
9. noschang commented on Apr 3, 2025

   

   noschang

   on Apr 3, 2025

   More actions

   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;
     }
   
10. marijnh commented on Apr 15, 2026

    

    marijnh

    on Apr 15, 2026

    Member

    More actions

    This issue has been moved to issue #1278 on the repository's new home.