fix: Bubble.List scroll compatible with safari

packages/x/components/bubble/BubbleList.tsx

@@ -7,6 +7,7 @@ import { useXProviderContext } from '../x-provider';
 import Bubble from './Bubble';
 import { BubbleContext } from './context';
 import DividerBubble from './Divider';
+import { useCompatibleScroll } from './hooks/useCompatibleScroll';
 import {
   BubbleItemType,
   BubbleListProps,
@@ -138,6 +139,8 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
 
   const bubblesRef = React.useRef<BubblesRecord>({});
 
+  const { reset } = useCompatibleScroll(autoScroll ? scrollBoxRef.current : null);
+
   // ============================ Prefix ============================
   const { getPrefixCls } = useXProviderContext();
 
@@ -165,8 +168,9 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
   const lastItemKey = items[items.length - 1]?.key || items.length;
   React.useEffect(() => {
     if (!scrollBoxRef.current) return;
+    reset();
     scrollBoxRef.current?.scrollTo({ top: autoScroll ? 0 : scrollBoxRef.current.scrollHeight });
-  }, [lastItemKey, autoScroll]);
+  }, [lastItemKey, autoScroll, reset]);
 
   // ============================= Refs =============================
   useProxyImperativeHandle(ref, () => {

packages/x/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`renders components/bubble/demo/_test.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex css-var-_r_40_ ant-flex-align-stretch ant-flex-vertical"
+  style="height: 320px; gap: 20px;"
+>
+  <div
+    class="ant-flex css-var-_r_40_ ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-_r_40_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      type="button"
+    >
+      <span>
+        start
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_r_40_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        stop
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_r_40_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        clear
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_r_40_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        autoScroll
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble-list css-var-_r_40_"
+  >
+    <div
+      class="ant-bubble-list-scroll-box ant-bubble-list-autoscroll"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders components/bubble/demo/_test.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/bubble/demo/animation.tsx extend context correctly 1`] = `
 <div
   class="ant-flex css-var-_r_3u_ ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
@@ -1632,6 +1685,9 @@ exports[`renders components/bubble/demo/list.tsx extend context correctly 1`] =
     <div
       class="ant-bubble-list-scroll-box ant-bubble-list-autoscroll"
     >
+      <div
+        style="bottom: 0px; flex-shrink: 0; pointer-events: none; height: 10px; visibility: hidden;"
+      />
       <div
         class="ant-bubble css-var-_r_f_ ant-bubble-start ant-bubble-loading"
       >
@@ -2741,6 +2797,9 @@ exports[`renders components/bubble/demo/list-scroll.tsx extend context correctly
     <div
       class="ant-bubble-list-scroll-box ant-bubble-list-autoscroll"
     >
+      <div
+        style="bottom: 0px; flex-shrink: 0; pointer-events: none; height: 10px; visibility: hidden;"
+      />
       <div
         class="ant-bubble css-var-_r_s_ ant-bubble-end"
       >

packages/x/components/bubble/__tests__/__snapshots__/demo.test.ts.snap

@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`renders components/bubble/demo/_test.tsx correctly 1`] = `
+<div
+  class="ant-flex css-var-_R_0_ ant-flex-align-stretch ant-flex-vertical"
+  style="height:320px;gap:20px"
+>
+  <div
+    class="ant-flex css-var-_R_0_ ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-_R_0_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      type="button"
+    >
+      <span>
+        start
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_R_0_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        stop
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_R_0_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        clear
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-_R_0_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        autoScroll
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-bubble-list css-var-_R_0_"
+  >
+    <div
+      class="ant-bubble-list-scroll-box ant-bubble-list-autoscroll"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/bubble/demo/animation.tsx correctly 1`] = `
 <div
   class="ant-flex css-var-_R_0_ ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"