diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index dc3f0ec21fc..2567be5b644 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -111,6 +111,11 @@ export const CustomScrollbar = ({
   }, []);
 
   const renderView = useCallback((passedProps: JSX.IntrinsicElements['div']) => {
+    // fixes issues of visibility on safari and ios devices
+    if (passedProps.style && passedProps.style['WebkitOverflowScrolling'] === 'touch') {
+      passedProps.style['WebkitOverflowScrolling'] = 'auto';
+    }
+
     return <div {...passedProps} className="scrollbar-view" />;
   }, []);
 
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 51bbeb3cb85..93495137aee 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     className="scrollbar-view"
     style={
       {
-        "WebkitOverflowScrolling": "touch",
+        "WebkitOverflowScrolling": "auto",
         "bottom": undefined,
         "left": undefined,
         "marginBottom": 0,