ResizeObserver loop limit exceeded

[trystanclarke]

First of all, great job with this library it is great to use and works nicely, so thanks for your hard work.

I would like to let you know that I am getting an error firing in window.onerror relating to the ResizeObserver since adding overlay scrollbars. This happens on chrome only and happens when elements are added and removed from the dom inside the scrolled element. It seems to happen when there is both an addition and removal of an element at the same time. This doesn't seem to affect functionality so for the moment I am just suppressing this particular error but I thought you might want to take a look. Searching around this error it looks like this can be an issue with chrome since chrome 64 and the workaround seems to be to throttle the callback function used in the ResizeObserver - see example in this thread https://github.com/d6u/react-container-query/issues/70

Kind Regards,

Trystan

[KingSora]

Good day!

Thanks for this, I'll try my best to resolve it. I don't really like the requestAnimationFrame "fix", because it just looks silly and it doesn't really solve it. I've created a fiddle so you (and maybe others) have a bit more insight about this:

• current version: https://jsfiddle.net/ko3rh78f/
• "fixed" version: https://jsfiddle.net/ko3rh78f/1/

Wrapping all the content of my callback method inside a requestAnimationFrame callback can't be really called a fix (in my opinion). I'll investigate in this a bit more if I have more time, but for now I'll leave it like this.

I've also found this useful answer:

This error means that ResizeObserver was not able to deliver all observations within a single animation frame. It is benign (your site will not break).

Which was posted in this StackOverflow thread: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

[trystanclarke]

Thanks for taking a look, I know what you mean about using requestAnimationFrame.

[nickensoul]

@KingSora thanks for your attention! any news? what do you think about this one year later?

[KingSora]

@nickensoul well, my opinion hasn't really changed..

[lazuee]

I get ResizeObserver loop limit exceeded issue when i add flexbox css to the parent of the div child that i used for a slider image. Can someone tell me how do i fix it? I used "Swiper" btw.

~~> https://swiperjs.com/

CSS

main {
    margin-top: calc(50px + 1.2rem);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

main > div:nth-child(1) {
    flex-basis: 15rem;
    flex-grow: 1;
    position: relative;
}

main > div:nth-child(2) {
    min-width: 66%;
    flex: 999 1 auto;
}

HTML

<main>
    <div class="sidebar">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image: url('https://upload-os-bbs.hoyolab.com/upload/2021/12/30/1015537/1ff3377b18f23db2963405bdfe3ae64e_5480716512515047731.jpg');"></div>
                <div class="swiper-slide" style="background-image: url('https://upload-os-bbs.hoyolab.com/upload/2022/01/07/69a59dabb3a13f1f0fcc0331ee48dd06_7625886486562636229.jpg');"></div>
                <div class="swiper-slide" style="background-image: url('https://upload-os-bbs.hoyolab.com/upload/2022/01/01/1015537/637bdcb0fa52b353daa3b271ae4a0219_620360665121362559.jpg');"></div>
                <div class="swiper-slide" style="background-image: url('https://upload-os-bbs.hoyolab.com/upload/2022/01/01/189066367/c1f4c7fba72c69fcfeb147d85e9bb110_5524854205114824271.jpg');"></div>
                <div class="swiper-slide" style="background-image: url('https://upload-os-bbs.hoyolab.com/upload/2021/12/30/f309f17168fbc19d49daf0fa795494bf_674523474336596083.jpg');"></div>
            </div>
            <div class="swiper-pagi"></div>

            <div class="swiper-prev"></div>
            <div class="swiper-next"></div>
        </div>
    </div>
    <div class="main-page">
        <div class="list-articles" blog id="page"></div>
    </div>
</main>

[elringus]

In case anyone struggling with this error shown in webpack overlay, you can mute it like this:

// webpack.config.js
devServer: {
    client: {
        overlay: { runtimeErrors: e => e.message !== "ResizeObserver loop limit exceeded" }
    }
}