Fix(Log): Compatible with iOS (less than 13.4) that does not support …

…`ResizeObserver`, but there may be a potential performance issue when printing a large number of logs. (issue #610)

CHANGELOG.md

@@ -1,12 +1,12 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
-## 3.15.1 (2023-05-??)
+## 3.15.1 (2023-06-01)
 
 - `Feat(Netwrk)` Add new option `network.ignoreUrlRegExp` to skip some requests. (PR #623)
 - `Fix(Core)` Fix prototype pollution in `vConsole.setOption()`. (issue #616 #621)
 - `Fix(Core)` Fix plugin event `ready` triggering before its HTML finishes rendering. (issue #591)
 - `Fix(Log)` Reset group state when `console.clear()` is called. (issue #611)
-- `Fix(Log)` Fix fatal error caused by iOS (less than 13.4) which is not support `ResizeObserver` interface. (issue #610)
+- `Fix(Log)` Compatible with iOS (less than 13.4) that does not support `ResizeObserver`, but there may be a potential performance issue when printing a large number of logs. (issue #610)
 - `Fix(Network)` Fix possible "Cannot read property" error by `sendBeacon`. (issue #615)
 
 

CHANGELOG_CN.md

@@ -1,12 +1,12 @@
 [English](./CHANGELOG.md) | 简体中文
 
-## 3.16.0 (2023-05-??)
+## 3.15.1 (2023-06-01)
 
 - `Feat(Netwrk)` 新增配置项 `network.ignoreUrlRegExp` 以跳过一些请求。 (PR #623)
 - `Fix(Core)` 修复 `vConsole.setOption()` 中可能存在的原型污染问题。 (issue #616 #621)
 - `Fix(Core)` 修复插件事件 `ready` 在插件完成渲染前就被触发的问题。 (issue #591)
 - `Fix(Log)` 修复调用 `console.clear()` 时没有重置 group 层级的问题。 (issue #611)
-- `Fix(Log)` 修复因 iOS（小于 13.4）不支持 `ResizeObserver` 接口导致的致命错误 (issue #610)
+- `Fix(Log)` 兼容 iOS（小于 13.4）不支持 `ResizeObserver` 的情况，代价是打印大批量日志可能会有性能问题。 (issue #610)
 - `Fix(Network)` 修复可能由 `sendBeacon` 引发的 "Cannot read property" 错误。 (issue #615)
 
 

src/component/recycleScroller/recycleItem.svelte

@@ -1,37 +1,41 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { ResizeObserverPolyfill } from './resizeObserver';
+  import { useResizeObserver, hasResizeObserver } from './resizeObserver';
 
-  export let show: boolean;
+  export let show: boolean = !hasResizeObserver();
   export let top: boolean;
-
   export let onResize: (height: number) => void = () => {};
 
   let item: HTMLDivElement | undefined;
-
   let observer: ResizeObserver | null = null;
+  let isObservable = hasResizeObserver();
 
   onMount(() => {
     if (show) {
       onResize(item.getBoundingClientRect().height);
     }
-    observer = new ResizeObserverPolyfill((entries) => {
-      const entry = entries[0];
-      if (show) onResize(entry.contentRect.height)
-    });
-    observer.observe(item);
+    if (isObservable) {
+      const ResizeObserverPolyfill = useResizeObserver();
+      observer = new ResizeObserverPolyfill((entries) => {
+        const entry = entries[0];
+        if (show) onResize(entry.contentRect.height)
+      });
+      observer.observe(item);
+    }
   });
 
   onDestroy(() => {
-    observer.disconnect();
+    if (isObservable) {
+      observer.disconnect();
+    }
   });
 </script>
 
 <div
   bind:this={item}
   class="vc-scroller-item"
-  style:display={show ? "block" : "none"}
-  style:top="{top}px"
+  style:display={show ? 'block' : 'none'}
+  style:top="{isObservable ? top + 'px' : 'auto'}"
 >
   <slot />
 </div>

src/component/recycleScroller/recycleScroller.less

@@ -20,6 +20,10 @@
   left: 0;
   right: 0;
 }
+.vc-scroller-viewport.static .vc-scroller-item {
+  display: block;
+  position: static;
+}
 
 .vc-scroller-footer {