标签: resize-observer

如何阻止“ResizeObserver 循环限制超出”错误出现在 React 应用程序中

最近，我的 React 应用程序中开始出现一个新错误：

ResizeObserver loop limit exceeded

似乎普遍的共识是该错误是良性的，没有什么可担心的。

但是，当我通过测试我的程序时，我不确定如何忽略它或让它停止显示npm start。

出现的屏幕如下所示：

有什么方法可以抑制此页面或其他地方的此特定错误，这样我就不必每次都将其忽略？

该错误来自我使用的MUI Masonry 组件，但我的理解是它可能来自许多依赖项。

这是我使用它的代码，以防有助于抑制此错误。

import Masonry from '@mui/lab/Masonry';
import { Box } from '@mui/material';
import { ReactNode } from 'react';
import { BsFillPlusSquareFill as AddButton } from 'react-icons/bs';
import { useNavigate } from 'react-router';
import { LoadingIndicator } from '../LoadingIndicator';
import { BackButton } from './BackButton';
import styles from './SheskaList.module.css';

export const SheskaListContent = (props: { loading: boolean, cards: ReactNode[] }) …

Run Code Online (Sandbox Code Playgroud)

error-handling reactjs eslint material-ui resize-observer

Ash*_*man

lucky-day

17
推荐指数

3
解决办法

3万
查看次数

如何使用 ResizeObserver 检测窗口大小调整事件

我想使用ResizeObserver检测 widnow 调整大小事件

我使用的货币

window.addEventListener('resize',() => console.log('resize'));

Run Code Online (Sandbox Code Playgroud)

我想重构它并使用ResizeObserver。是否可以？

javascript resize-observer

Luk*_*uke

lucky-day

15
推荐指数

1
解决办法

1万
查看次数

ReferenceError：未使用 nivo 和 NextJS 定义 ResizeObserver

我想将 nivo 与 Next 一起使用，但是当我加载包含用 nivo 制作的饼图的页面时，出现以下错误：ReferenceError: ResizeObserver is not defined。

我的Pie.js组件：

import { ResponsivePie } from "@nivo/pie";

export const data = [
  {
    id: "c",
    label: "c",
    value: 80,
    color: "hsl(8, 70%, 50%)",
  },
  {
    id: "lisp",
    label: "lisp",
    value: 188,
    color: "hsl(122, 70%, 50%)",
  },

  {
    id: "go",
    label: "go",
    value: 161,
    color: "hsl(111, 70%, 50%)",
  },
];

export default function MyPie({ data }) {

    return (
        <ResponsivePie
            data={data}
            margin={{ top: 40, right: 80, …

Run Code Online (Sandbox Code Playgroud)

reactjs next.js nivo-react resize-observer

Que*_*n C

2022 02-14

8
推荐指数

2
解决办法

5890
查看次数

是否可以使用 resizeObserver （或类似的东西）来观察元素的顶部/左侧位置？

我试图将一个 div 绝对定位在另一个 div 之上。我试图覆盖的 div 可以根据用户交互更改大小和位置。

我已经使用 resizeObserver 成功匹配了大小，但有一个问题是，如果我试图覆盖的 div 上方的页面改变了高度，则 resizeObserver 不会触发将覆盖的 div 移回原位 - x/y在 resizeObserver 回调中始终为 0/0。

有没有办法观察静态元素的 x/y 位置？

javascript resize-observer

mar*_*ite

lucky-day

7
推荐指数

1
解决办法

1733
查看次数

使用 Karma 和 Jasmine 在 Angular 12 上测试 ResizeObserver 事件

我正在尝试使用 karma 和 jasmine 测试ResizeObserverAngular 12 应用程序中调用的代码。当我通过在浏览器上打开应用程序进行手动测试时，代码表现得非常好，但在我的单元测试中，业力似乎只是忽略了ResizeObserver. 有人知道在业力/茉莉花测试中使用是否存在一些问题ResizeObserver，导致其无法正常工作？

应用程序描述

我构建了一个简单的应用程序来隔离问题。核心代码是一个组件，它只绘制一个被 a 观察的 div ResizeObserver。观察者在调整大小时存储新的 div 大小，并且模板在自己的 div 内显示此信息。

组件核心代码：

@ViewChild('aDiv')
aDiv!: ElementRef;

resizeObserver!: ResizeObserver;

dimensions?: Dimensions;

constructor(private zone: NgZone) { }

ngOnInit(): void {
  const that = this;
  this.resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      if(entry.target.tagName.toLowerCase() === 'div') {
        const div = entry.target as HTMLDivElement;
        that.onResize(div);
      }
    }
  });
}

ngAfterViewInit(): void {
  this.resizeObserver.observe(this.aDiv.nativeElement);
}

ngOnDestroy(): void { …

Run Code Online (Sandbox Code Playgroud)

jasmine typescript karma-runner angular resize-observer

Iog*_*gui

lucky-day

7
推荐指数

0
解决办法

1160
查看次数

当内容高度变化时，ResizeObserver 不会被触发（React）

当我手动调整窗口大小时它有效，但当内容高度发生变化时则不起作用，而这正是我所需要的。

难道我做错了什么？

class MainContainer extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.containerObserver = null;
    this.state = {
      top: false,
    };
  }

  componentDidMount() {
    this.containerObserver = new ResizeObserver((e) => this.handleResize(e));
    this.containerObserver.observe(this.containerRef.current);
  }

  componentWillUnmount() {
    if (this.containerObserver) {
      this.containerObserver.disconnect();
    }
  }

  handleResize = (e) => {
    const { target } = e[0];

    const top = target.scrollTop;
    const scrollHeight = target.scrollHeight;
    const position = scrollHeight - top;
    const clientHeight = target.clientHeight;

    console.log({ top }, { scrollHeight }, { position }, { …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs styled-components resize-observer

Bor*_*rsn

lucky-day

7
推荐指数

1
解决办法

9550
查看次数

如何使用 ResizeObserver 在 JavaScript 中仅检查正文的宽度变化？

我想检查<body>的宽度变化（而不是高度）。

有没有办法用 ResizeObserver 来做到这一点？

javascript resize-observer

AGa*_*yer

lucky-day

6
推荐指数

1
解决办法

8465
查看次数

检查所有调整大小观察者

有没有办法检查ResizeObserver给定页面中存在的所有条目？

有开发工具可以帮忙吗？尝试寻找，但没有结果

javascript firefox dom google-chrome resize-observer

Los*_*ear

lucky-day

6
推荐指数

0
解决办法

307
查看次数

我应该为移除的元素调用 ResizeObserver.unobserve 吗？

当某些观察到的元素从 DOM 中删除时，我应该调用.unobserve该元素以防止内存泄漏，还是会“自动不被观察到”？

const ro = new ResizeObserver((entries) => { console.log(entries); });
const el = document.getElementById('foo');
ro.observe(el);
// ... some time later
el.remove();
ro.unobserve(el); // <-- is this needed, or does it happen automatically behind the scenes?

Run Code Online (Sandbox Code Playgroud)

为什么我问：我正在实现一个观察许多孩子的 React 组件，并正确清理未安装组件的观察者将涉及非平凡的代码，如果实际上不需要它，我想避免这种情况。

javascript resize-observer

ami*_*mik

lucky-day

5
推荐指数

2
解决办法

196
查看次数

ReferenceError：找不到变量：在支持 ResizeObserver 的浏览器 (Safari v15.6.1) 上的 ResizeObserver

我看到用户收到错误，ReferenceError: Can't find variable: ResizeObserver即使他们使用的浏览器（Safari v15.6.1、v16.1）是应该支持 ResizeObserver 的版本。

任何人都知道可能是什么原因造成的？

PS - 我还使用polyfill.io为不支持它的浏览器加载ResizeObserver polyfill，但我猜在这些情况下它不会下载polyfill，因为这些浏览器版本应该支持ResizeObserver

谢谢

mobile-safari polyfills resize-observer

Uri*_*lar

lucky-day

5
推荐指数

0
解决办法

633
查看次数

Cypress 等待转换完成（等待正确的宽度）

我有菜单和汉堡按钮可以切换它，并且想测试这种行为。但是，菜单并没有完全消失，只是在隐藏时变得更薄（只有图标可见），所以我不能只测试它是否可见，因为它总是可见。

因此，我通过invoke('width')这样的方式检查尺寸：

cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.above', 200)
cy.get('[data-test="sidebar-toggle"]')
  .click()
cy.get('[data-test="sidebar"]')
  .invoke('width')
  .should('be.below', 100)

Run Code Online (Sandbox Code Playgroud)

但我收到错误ResizeObserver loop limit exceeded，因为它在单击后不等待菜单转换完成。所以我只是添加了wait(500)之后click()，现在它可以工作了。但这不是有点黑客吗？现在我需要为每个转换设置正确的延迟，或者总是设置一个适用于所有转换的很长的延迟，但这浪费了测试时间。

是否有任何简单的通用方法告诉 Cypress 等待我的宽度达到应有的宽度，而不是立即放弃？

编辑：我对 wait() 解决方案的看法是错误的，它并没有真正的帮助。错误可能与转换无关。无需使用已接受答案中更改的代码 -invoke有效。但是这个关于忽略错误的答案的解决方案是正确的 - 关于此错误有多个问题，并且可以安全地忽略。答案如此简短 - 只需忽略此异常即可。它可以不放在 test 中，而是放在 support/index.js 中，这样它就可以在全球范围内工作。

animation cypress resize-observer

nor*_*orr

2021 07-12

4
推荐指数

1
解决办法

3500
查看次数

ResizeObserver 仅在 Web 组件添加到 DOM 时触发，而不是在调整大小时触发

我已经创建了一个 Web 组件，并尝试将 a 添加ResizeObserver到该元素。

ResizeObserver添加后，connectedCallback它似乎只在元素添加到 DOM 时触发一次，但在元素调整大小时不会再次触发。

我希望ResizeObserver当组件被其父元素强制调整大小时，将被触发。我已经检查并观察了开发人员工具中的元素大小，它确实调整了大小。

我还使用标准 HTML 元素（id：#foo）测试了相同的代码，并且回调有效。所以我只能假设问题与 Shadow DOM 有关。

规范说：

当观察元素被插入/从 DOM 中删除时，观察将会触发
当观看的元素显示设置为无时，观察将触发。
对于未替换的内联元素，不会触发观察。
CSS 转换不会触发观察。
如果正在渲染 Element，并且 Element\xe2\x80\x99s 大小不为 0,0，则观察开始时将触发观察。

我可以确认第一点发生了。

我预计第五点应该会发生，但它从来没有发生过。如果检查元素，它的大小不是 0,0 并且会随页面调整大小。

我已经浏览了 Web 组件的 MDN 文档和ResizeObserver许多其他网站，据我所知，我的一切都是正确的。

这是代码的 JSFiddle：\n https://jsfiddle.net/h15e48fx/1/

javascript resize callback web-component resize-observer

leo*_*law

2022 11-27

1
推荐指数

1
解决办法

1167
查看次数

错误：超出 ResizeObserver 循环限制

我试图在某些应用程序中通过 google 自动登录，但收到此错误消息：（未捕获的异常）错误：超过 ResizeObserver 循环限制错误以下错误源自您的应用程序代码，而不是来自 Cypress。

超出 ResizeObserver 循环限制

当赛普拉斯检测到源自您的应用程序的未捕获错误时，它将自动使当前测试失败。

此行为是可配置的，您可以选择通过侦听 uncaught:exception 事件来关闭此行为。

这是我的代码：

describe('empty spec', () => {
  it('login multi domain ', () => {
    cy.visit('/login');
    cy.get('form > .flex').click({force:true});


    cy.origin(`https://accounts.google.com`, ()=>{
        cy.get("#identifierId").type("user");
        cy.get(".VfPpkd-LgbsSe-OWXEXe-k8QpJ").click({force:true});
        cy.get(`#password`).type("pass");
        cy.get(".VfPpkd-LgbsSe-OWXEXe-k8QpJ").click({force:true});
    })
  })
})

Run Code Online (Sandbox Code Playgroud)

提前致谢

javascript automation dom cypress resize-observer

Yov*_*dad

2023 05-03

0
推荐指数

1
解决办法

1321
查看次数