[bug]rounded-corners cause problems

[Starry-AXQG]

Describe the bug
When rounded-corners.css is enabled normally, you won't be able to control the scroll bar by moving the mouse to the very edge of the screen

To Reproduce
Description:

1. If you have rounded corners enabled.
2. You'll notice that your browser's scroll bar is shifted a few pixels to the left.
3. In addition, it also affects the position of the sidebar edge line, if you want to move the mouse over the sidebar to stretch or fold it, your mouse needs to shift the edge line by a few pixels.

When I thought it was a browser problem, I didn't care because I tested it in nightly and found the above issues to be normal. However, the reason I find nightly normal is that nightly doesn't make rounded-corners.css work properly

Firefox version (please complete the following information):

• Version [136.0.2]

[amnweb]

For me looks fine (136.0.2)

2025-03-24.11-36-45.mp4

[Starry-AXQG]

For me looks fine (136.0.2)对我来说看起来不错（136.0.2）
2025-03-24.11-36-45.mp4

I'm sorry I didn't give a full description. Such problems need to be most noticeable when the browser window is maximized. Look at my demo:

[amnweb]

Still can't reproduce this issue, it's working fine when maximized. Please share a video showing the problem.

[Starry-AXQG]

Sorry to keep you waiting, but I frequently encounter upload errors when uploading ，so I used Youtube.
demo

[Starry-AXQG]

You should be able to easily observe that with rounded corners disabled, the scroll bar is edging and therefore easier to interact with.If you turn on rounded corners, the scroll bar will shift to the left, so you need to move the mouse carefully

[kbc8090]

Yea Edge keeps the scrollbar map all the way to the screen edge. I couldn't figure out a way to do this for Firefox. Unfortunate.

[kbc8090]

Well I hunted down a solution, I found a javascript file then went on an AI adventure. Suffice to say there's really no great solution right now, javascript has its limitations, especially when trying to scroll non-chrome windows, aka espn.com and whatnot. If we were only trying to drag and use scrollbars in the about:support window I think this solution would have been pretty good. If anyone thinks they can get this solution working better then have at it. It's very laggy trying to drag the scrollbar from the gutter on the right of a maximized window when the rounded corners are turned on, but it does kind of work. Another problem is javascript can't interprete MSD scrolling from the firefox settings, so it just uses a defaul smoothscroll algo. Anyway here is what Claude/Grok came up with, very hacky.. also remember you gotta have firefox use javascript files which in itself is a pain in the ass....

// ==UserScript==
// @name           Edge Scrollbar Drag from Screen Edge (Left + Right)
// @description    Allows dragging the inset scrollbar from either screen edge (4px zone on left and right)
// @author         Your Name + mod by Grok
// @include        main
// ==/UserScript==

(function() {
  'use strict';

  const EDGE_WIDTH = 4; // Width of the invisible drag zone on each side

  // Frame script stays exactly the same
  const FRAME_SCRIPT = `
    const scrollState = {
      isDragging: false,
      startY: 0,
      startScrollTop: 0,
      lastScrollTime: 0,
      isHoldScrolling: false,
      holdScrollInterval: null,
      holdScrollTarget: 0
    };

    function getScrollableElement() {
      if (content.document.scrollingElement) {
        return content.document.scrollingElement;
      }
      return content.document.documentElement || content.document.body;
    }

    function getViewportHeight() {
      return content.innerHeight;
    }

    function isClickOnThumb(clickY, windowHeight) {
      const scrollable = getScrollableElement();
      const viewportHeight = getViewportHeight();
      const maxScroll = scrollable.scrollHeight - viewportHeight;
      
      if (maxScroll <= 0) return false;
      
      const currentScroll = scrollable.scrollTop;
      const scrollRatio = currentScroll / maxScroll;
      
      // Calculate where the scrollbar thumb would be
      const scrollbarHeight = windowHeight;
      const thumbHeight = Math.max(30, (viewportHeight / scrollable.scrollHeight) * scrollbarHeight);
      const trackHeight = scrollbarHeight - thumbHeight;
      const thumbPosition = scrollRatio * trackHeight;
      
      // Make the clickable area bigger than the visual thumb for easier grabbing
      // Add 50px padding above and below the calculated thumb position
      const clickPadding = 50;
      const expandedThumbStart = Math.max(0, thumbPosition - clickPadding);
      const expandedThumbEnd = Math.min(windowHeight, thumbPosition + thumbHeight + clickPadding);
      
      // Check if click is within expanded thumb bounds
      return clickY >= expandedThumbStart && clickY <= expandedThumbEnd;
    }

    function startHoldScroll(clickY, windowHeight, scrollUp) {
      scrollState.isHoldScrolling = true;
      scrollState.holdScrollTarget = clickY;
      
      const scrollable = getScrollableElement();
      const viewportHeight = getViewportHeight();
      const maxScroll = scrollable.scrollHeight - viewportHeight;
      
      // Scroll speed in pixels per frame (adjust for faster/slower)
      const scrollSpeed = 15;
      
      function doHoldScroll() {
        if (!scrollState.isHoldScrolling) return;
        
        const currentScroll = scrollable.scrollTop;
        const scrollRatio = currentScroll / maxScroll;
        const thumbHeight = Math.max(30, (viewportHeight / scrollable.scrollHeight) * windowHeight);
        const trackHeight = windowHeight - thumbHeight;
        const thumbPosition = scrollRatio * trackHeight;
        
        // Check if thumb has reached target
        if (scrollUp && thumbPosition <= clickY) {
          stopHoldScroll();
          return;
        }
        if (!scrollUp && (thumbPosition + thumbHeight) >= clickY) {
          stopHoldScroll();
          return;
        }
        
        // Scroll continuously
        const newScroll = scrollUp 
          ? Math.max(0, currentScroll - scrollSpeed)
          : Math.min(maxScroll, currentScroll + scrollSpeed);
        
        scrollable.scrollTop = newScroll;
        
        // Check if we can't scroll anymore
        if ((scrollUp && currentScroll <= 0) || (!scrollUp && currentScroll >= maxScroll)) {
          stopHoldScroll();
          return;
        }
        
        // Continue scrolling on next frame
        scrollState.holdScrollInterval = content.requestAnimationFrame(doHoldScroll);
      }
      
      // Start scrolling
      scrollState.holdScrollInterval = content.requestAnimationFrame(doHoldScroll);
    }
    
    function stopHoldScroll() {
      scrollState.isHoldScrolling = false;
      if (scrollState.holdScrollInterval) {
        content.cancelAnimationFrame(scrollState.holdScrollInterval);
        scrollState.holdScrollInterval = null;
      }
    }

    addMessageListener("EdgeScroll:CheckThumb", function(msg) {
      const scrollable = getScrollableElement();
      const viewportHeight = getViewportHeight();
      const maxScroll = scrollable.scrollHeight - viewportHeight;
      
      if (maxScroll <= 0) {
        // No scrolling needed, treat as thumb click
        sendAsyncMessage("EdgeScroll:ShouldDrag", {
          clientY: msg.data.clientY
        });
        return;
      }
      
      const currentScroll = scrollable.scrollTop;
      const scrollRatio = currentScroll / maxScroll;
      
      const scrollbarHeight = msg.data.windowHeight;
      const thumbHeight = Math.max(30, (viewportHeight / scrollable.scrollHeight) * scrollbarHeight);
      const trackHeight = scrollbarHeight - thumbHeight;
      const thumbPosition = scrollRatio * trackHeight;
      
      const clickY = msg.data.clientY;
      
      // Special cases: if at very top or very bottom, expand thumb area
      const isAtTop = currentScroll < 10;
      const isAtBottom = currentScroll > (maxScroll - 10);
      
      let shouldDrag = false;
      
      if (isAtTop) {
        shouldDrag = clickY < (scrollbarHeight / 2);
      } else if (isAtBottom) {
        shouldDrag = clickY > (scrollbarHeight / 2);
      } else {
        const clickPadding = 80;
        const expandedThumbStart = Math.max(0, thumbPosition - clickPadding);
        const expandedThumbEnd = Math.min(scrollbarHeight, thumbPosition + thumbHeight + clickPadding);
        shouldDrag = clickY >= expandedThumbStart && clickY <= expandedThumbEnd;
      }
      
      if (shouldDrag) {
        sendAsyncMessage("EdgeScroll:ShouldDrag", {
          clientY: msg.data.clientY
        });
      } else {
        // Single click - use smooth scroll
        const scrollUp = clickY < thumbPosition;
        const pageScroll = viewportHeight * 0.9;
        const newScroll = scrollUp 
          ? Math.max(0, currentScroll - pageScroll)
          : Math.min(maxScroll, currentScroll + pageScroll);
        
        content.window.scrollTo({
          top: newScroll,
          behavior: 'smooth'
        });
        
        // Start hold scroll timer - if mouse is still down after 300ms, switch to continuous scroll
        content.setTimeout(() => {
          if (scrollState.isHoldScrolling) {
            // Already started, ignore
            return;
          }
          // Check if this might be a hold (not handled yet)
          sendAsyncMessage("EdgeScroll:CheckIfHolding", {
            clickY: clickY,
            windowHeight: scrollbarHeight,
            scrollUp: scrollUp
          });
        }, 300);
      }
    });

    addMessageListener("EdgeScroll:StartHoldScroll", function(msg) {
      startHoldScroll(msg.data.clickY, msg.data.windowHeight, msg.data.scrollUp);
    });

    addMessageListener("EdgeScroll:StopHoldScroll", function(msg) {
      stopHoldScroll();
    });

    addMessageListener("EdgeScroll:StartDrag", function(msg) {
      const scrollable = getScrollableElement();
      scrollState.isDragging = true;
      scrollState.startY = msg.data.clientY;
      scrollState.startScrollTop = scrollable.scrollTop;
      scrollState.lastScrollTime = Date.now();
    });

    addMessageListener("EdgeScroll:DoDrag", function(msg) {
      if (!scrollState.isDragging) return;
      
      const scrollable = getScrollableElement();
      const viewportHeight = getViewportHeight();
      const maxScroll = scrollable.scrollHeight - viewportHeight;
      
      if (maxScroll <= 0) return;
      
      const deltaY = msg.data.clientY - scrollState.startY;
      const scrollRatio = deltaY / viewportHeight;
      const scrollDelta = scrollRatio * maxScroll;
      
      let newScroll = scrollState.startScrollTop + scrollDelta;
      newScroll = Math.max(0, Math.min(maxScroll, newScroll));
      
      scrollable.scrollTop = newScroll;
      scrollState.lastScrollTime = Date.now();
    });

    addMessageListener("EdgeScroll:EndDrag", function(msg) {
      scrollState.isDragging = false;
    });

    addMessageListener("EdgeScroll:Click", function(msg) {
      const scrollable = getScrollableElement();
      const viewportHeight = getViewportHeight();
      const maxScroll = scrollable.scrollHeight - viewportHeight;
      
      if (maxScroll <= 0) return;
      
      const currentScroll = scrollable.scrollTop;
      const scrollRatio = currentScroll / maxScroll;
      
      // Calculate where the scrollbar thumb would be
      const scrollbarHeight = viewportHeight;
      const thumbHeight = Math.max(30, (viewportHeight / scrollable.scrollHeight) * scrollbarHeight);
      const trackHeight = scrollbarHeight - thumbHeight;
      const thumbPosition = scrollRatio * trackHeight;
      
      // Where did the user click?
      const clickY = msg.data.clickY;
      
      // Debug logging
      console.log("EdgeScroll Click Debug:");
      console.log("  clickY:", clickY);
      console.log("  thumbPosition:", thumbPosition);
      console.log("  thumbHeight:", thumbHeight);
      console.log("  currentScroll:", currentScroll);
      console.log("  viewportHeight:", viewportHeight);
      
      // Determine if click is above or below the thumb
      if (clickY < thumbPosition) {
        // Click above thumb - scroll up one page
        console.log("  Action: Scroll UP");
        const newScroll = Math.max(0, currentScroll - (viewportHeight * 0.9));
        content.window.scrollTo({
          top: newScroll,
          behavior: 'smooth'
        });
      } else if (clickY > (thumbPosition + thumbHeight)) {
        // Click below thumb - scroll down one page
        console.log("  Action: Scroll DOWN");
        const newScroll = Math.min(maxScroll, currentScroll + (viewportHeight * 0.9));
        content.window.scrollTo({
          top: newScroll,
          behavior: 'smooth'
        });
      } else {
        console.log("  Action: Click on thumb - no scroll");
      }
    });

    addMessageListener("EdgeScroll:Wheel", function(msg) {
      if (content && content.window) {
        content.window.scrollBy({
          left: msg.data.deltaX,
          top: msg.data.deltaY,
          behavior: 'smooth'
        });
      }
    });
  `;

  const FRAME_SCRIPT_URI = "data:," + encodeURIComponent(FRAME_SCRIPT);
  const loadedBrowsers = new WeakSet();

  let isDragging = false;
  let dragStarted = false;
  let mouseIsDown = false;
  let lastClickInfo = null;

  // Set up message listener for drag responses
  function setupMessageListener(browser) {
    if (!browser.messageManager) return;
    
    browser.messageManager.addMessageListener("EdgeScroll:ShouldDrag", function(msg) {
      // Frame script determined we clicked on thumb, start dragging
      isDragging = true;
      dragStarted = true;
      
      try {
        browser.messageManager.sendAsyncMessage("EdgeScroll:StartDrag", {
          clientY: msg.data.clientY
        });
      } catch (err) {
        console.error('Edge Scrollbar: Failed to start drag', err);
      }
    });
    
    browser.messageManager.addMessageListener("EdgeScroll:CheckIfHolding", function(msg) {
      // If mouse is still down after 300ms, start continuous scroll
      if (mouseIsDown && !isDragging) {
        try {
          browser.messageManager.sendAsyncMessage("EdgeScroll:StartHoldScroll", {
            clickY: msg.data.clickY,
            windowHeight: msg.data.windowHeight,
            scrollUp: msg.data.scrollUp
          });
        } catch (err) {
          console.error('Edge Scrollbar: Failed to start hold scroll', err);
        }
      }
    });
  }

  function ensureFrameScript() {
    const browser = gBrowser.selectedBrowser;
    if (!browser) return;

    if (!loadedBrowsers.has(browser)) {
      try {
        if (browser.messageManager) {
          browser.messageManager.loadFrameScript(FRAME_SCRIPT_URI, false);
          loadedBrowsers.add(browser);
          setupMessageListener(browser);
        }
      } catch (e) {
        console.error('Edge Scrollbar: Failed to load frame script', e);
      }
    }
  }

  // Force reload frame script (for when it gets lost)
  function forceReloadFrameScript() {
    const browser = gBrowser.selectedBrowser;
    if (!browser) return;
    
    // Remove from loaded set to force reload
    loadedBrowsers.delete(browser);
    ensureFrameScript();
  }

  // Create overlay for left or right edge
  function createEdgeOverlay(side = 'right') {
    const overlay = document.createXULElement('box');
    overlay.id = `edge-scrollbar-overlay-${side}`;
    
    const positionCSS = side === 'left' ? 'left: 0 !important;' : 'right: 0 !important;';
    
    overlay.style.cssText = `
      position: fixed !important;
      top: 0 !important;
      ${positionCSS}
      width: ${EDGE_WIDTH}px !important;
      height: 100% !important;
      z-index: 2147483647 !important;
      cursor: default !important;
      pointer-events: auto !important;
      background-color: transparent !important;
    `;
    
    // Update position to account for toolbar height
    function updateOverlayPosition() {
      const browser = document.getElementById('browser');
      if (browser) {
        const rect = browser.getBoundingClientRect();
        overlay.style.top = rect.top + 'px';
        overlay.style.height = rect.height + 'px';
      }
    }
    
    // Update immediately and on window resize
    updateOverlayPosition();
    window.addEventListener('resize', updateOverlayPosition);
    
    // Also update when toolbar visibility changes
    const observer = new MutationObserver(updateOverlayPosition);
    const toolbox = document.getElementById('navigator-toolbox');
    if (toolbox) {
      observer.observe(toolbox, { attributes: true, childList: true, subtree: true });
    }
    
    return overlay;
  }

  function getScrollMultipliers() {
    try {
      const prefService = Services.prefs;
      return {
        x: prefService.getIntPref("mousewheel.default.delta_multiplier_x", 100),
        y: prefService.getIntPref("mousewheel.default.delta_multiplier_y", 100)
      };
    } catch (e) {
      return { x: 100, y: 100 };
    }
  }

  function getLineHeight() {
    try {
      return Services.prefs.getIntPref("mousewheel.system_scroll_override_on_root_content.vertical.factor", 100);
    } catch (e) {
      return 100;
    }
  }

  // Event handlers
  function handleMouseDown(e) {
    if (e.button !== 0) return;
    const browser = gBrowser.selectedBrowser;
    if (!browser || !browser.messageManager) return;
    
    ensureFrameScript();
    
    mouseIsDown = true;
    isDragging = false;
    dragStarted = false;
    
    try {
      browser.messageManager.sendAsyncMessage("EdgeScroll:CheckThumb", {
        clientY: e.clientY,
        windowHeight: window.innerHeight
      });
    } catch (err) {
      console.error('Edge Scrollbar: Failed to check thumb', err);
    }
    
    e.preventDefault();
    e.stopPropagation();
  }

  function handleMouseMove(e) {
    if (!isDragging || !dragStarted) return;
    
    const browser = gBrowser.selectedBrowser;
    if (!browser || !browser.messageManager) return;
    
    try {
      browser.messageManager.sendAsyncMessage("EdgeScroll:DoDrag", {
        clientY: e.clientY
      });
    } catch (err) {
      console.error('Edge Scrollbar: Failed to drag', err);
    }
    
    e.preventDefault();
    e.stopPropagation();
  }

  function handleMouseUp(e) {
    mouseIsDown = false;
    
    // Stop any hold scroll
    const browser = gBrowser.selectedBrowser;
    if (browser && browser.messageManager) {
      try {
        browser.messageManager.sendAsyncMessage("EdgeScroll:StopHoldScroll", {});
      } catch (err) {
        console.error('Edge Scrollbar: Failed to stop hold scroll', err);
      }
    }
    
    if (!isDragging) return;
    
    if (browser && browser.messageManager) {
      try {
        browser.messageManager.sendAsyncMessage("EdgeScroll:EndDrag", {});
      } catch (err) {
        console.error('Edge Scrollbar: Failed to end drag', err);
      }
    }
    
    isDragging = false;
    
    setTimeout(() => {
      dragStarted = false;
    }, 50);
    
    e.preventDefault();
    e.stopPropagation();
  }

  function handleClick(e) {
    // Click handler is no longer needed - all clicks go through mousedown
    // This is just here to prevent default click behavior
    e.preventDefault();
    e.stopPropagation();
  }

  let lastWheelTime = 0;
  let wheelVelocity = 0;

  function handleWheel(event) {
    const browser = gBrowser.selectedBrowser;
    if (!browser || !browser.messageManager) return;

    ensureFrameScript();

    const now = Date.now();
    const timeDelta = now - lastWheelTime;
    lastWheelTime = now;
    
    if (timeDelta < 100) {
      wheelVelocity = Math.min(wheelVelocity + 0.15, 1.0);
    } else if (timeDelta > 300) {
      wheelVelocity = 0;
    } else {
      wheelVelocity = Math.max(wheelVelocity - 0.1, 0);
    }
    
    const speedMultiplier = 0.45 + (wheelVelocity * 3.25);

    let deltaX = event.deltaX;
    let deltaY = event.deltaY;

    const multipliers = getScrollMultipliers();
    const lineHeight = getLineHeight();
    const pixelsPerLine = 21.33;

    if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
      deltaX = (deltaX * pixelsPerLine * lineHeight * speedMultiplier) / 100;
      deltaY = (deltaY * pixelsPerLine * lineHeight * speedMultiplier) / 100;
    } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
      deltaX = (deltaX * 800 * lineHeight * speedMultiplier) / 100;
      deltaY = (deltaY * 600 * lineHeight * speedMultiplier) / 100;
    }

    try {
      browser.messageManager.sendAsyncMessage("EdgeScroll:Wheel", {
        deltaX: deltaX,
        deltaY: deltaY
      });
    } catch (e) {
      console.error('Edge Scrollbar: Wheel error', e);
    }
    
    event.preventDefault();
    event.stopPropagation();
  }

  // Initialize both overlays
  function init() {
    const browserBox = document.getElementById('browser');
    if (!browserBox) {
      console.error('Edge Scrollbar: Could not find browser element');
      return;
    }

    const leftOverlay  = createEdgeOverlay('left');
    const rightOverlay = createEdgeOverlay('right');

    // Add the same listeners to both overlays
    [leftOverlay, rightOverlay].forEach(overlay => {
      overlay.addEventListener('mousedown', handleMouseDown, true);
      overlay.addEventListener('click',     handleClick,     true);
      overlay.addEventListener('wheel',     handleWheel,     { passive: false, capture: true });
      browserBox.appendChild(overlay);
    });

    // Global drag handlers
    window.addEventListener('mousemove', handleMouseMove, true);
    window.addEventListener('mouseup',   handleMouseUp,   true);

    // Load frame script on tab switch
    gBrowser.tabContainer.addEventListener('TabSelect', () => {
      setTimeout(ensureFrameScript, 100);
    });

    // Load frame script on location change
    gBrowser.addTabsProgressListener({
      onLocationChange: function(aBrowser) {
        if (aBrowser === gBrowser.selectedBrowser) {
          // Force reload on location change to catch domain switches
          setTimeout(forceReloadFrameScript, 100);
        }
      }
    });

    // Reload frame script when tab finishes loading
    gBrowser.addTabsProgressListener({
      onStateChange: function(aBrowser, aWebProgress, aRequest, aStateFlags, aStatus) {
        if (aBrowser === gBrowser.selectedBrowser && 
            aStateFlags & Ci.nsIWebProgressListener.STATE_STOP) {
          setTimeout(forceReloadFrameScript, 200);
        }
      }
    });

    // Periodically check and reload if needed (safety net)
    setInterval(() => {
      if (gBrowser.selectedBrowser) {
        ensureFrameScript();
      }
    }, 5000);

    // Initial load
    setTimeout(ensureFrameScript, 500);
    
    console.log('Edge Scrollbar (Left + Right): Initialized successfully');
  }

  // Wait for Firefox UI to be ready
  if (gBrowserInit.delayedStartupFinished) {
    init();
  } else {
    let delayedListener = (subject, topic) => {
      if (topic == 'browser-delayed-startup-finished' && subject == window) {
        Services.obs.removeObserver(delayedListener, topic);
        init();
      }
    };
    Services.obs.addObserver(delayedListener, 'browser-delayed-startup-finished');
  }

})();

[Starry-AXQG]

Although I initially raised this issue, I no longer care about its progress because I have switched to the Zen browser.
The Zen browser has the same problem, but it has already been resolved by someone. All that's left is to wait for the PR to be merged.
zen-browser/desktop#8461

[kbc8090]

I searched through their github for a solution, didnt realize there was a PR for it. It was the first place I looked since I remember it also had rounded corners when I tried it. I just cant get used to vertical tabs, logically it makes sense but it feels very awkward to me. Maybe on a 21:9 monitor it would be better.

[amnweb]

I still think it is not a big problem, this is a problem with 4px padding on the window edge

If we disable this padding the radius looks bad, maybe we can put some overlay scroll but invisible over this 4px but not sure, need to try

[kbc8090]

Well, for me who is just a traditional user, maximized browser window guy, it's just an annoyance of sorts. Edge has managed to do this flawlessly now obviously and trying to do a hacky workaround on Firefox just bothers me, but it's not a big deal. For example on this very webpage, we're at the bottom of a very long webpage since I posted that whole long javascript slop and my natural instinct to get to the top is to slam my mouse to the screens edge and drag the scrollbar to the top. I can do this very quickly, but when there's margins around the whole thing it makes it more tedius. Also for pages like youtube or something i'll sometimes hover my cursor on the very left so the cursor doesnt start autoplaying a video if I have it in the middle of the screen. You would think why not just forget the rounded corners, which I mostly have, but for some reason when I use Edge I find it visually appealing to have the viewport around the browser.

A solution I did implement was keeping the other 3 gaps there and pushing the right side all the way to the screen edge, which looks decent, but still doenst solve scrolling on the left side of the screen, but it's a nice middle ground.