HierarchyRequestError on latest Chrome

[systemaddict]

I'm seeing a lot of these errors on some specific chrome versions. Unfortunately, I haven't been able to reproduce it myself:

HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

It's happening with this code (and the error is inside the tns slider block):

https://eb.frmt.dk/static/v2/test.htm

Tiny-slider version: 2.9.1

Browser name && version:

Chrome 78.0.3904.70 Chrome 77.0.3865.120

OS name && version: Windows 10

[Cedric-ruiu]

+1 See the same error in another project with tiny-slider 2.9.2 & mainly Chrome 81.

[janpecha]

IMHO is error in function getClientWidth https://github.com/ganlanyuan/tiny-slider/blob/c6db194fc5a65da030e04f7d262e84f7d4d5b9e1/src/tiny-slider.js#L541-L549

It iterates to root (getClientWidth(el.parentNode)) and throws error.

[gepetobio]

tiny-slider version: 2.9.2

I'm working on a project that has the same error showing up on https://sentry.io/

And as @janpecha mentioned, the error seems to be related to getClientWidth function.

Also, the vast majority of the errors happen on Android devices, with Windows 10 and Windows XP (yeah, that's still around 🤦 ):

In regards to the browsers, here's the more accurate list:

And lastly, as @systemaddict I'm having a pretty hard time trying to reproduce the issue. It happens quite sporadicly and there isn't a clear indication why this is happening. The website has about 25k views in a day and the errors happen 10~50 times in a day (not sure what makes it vary so much as the slider is in the footer of the website, so it shows no matter which page you are).

PS: the error on the screenshots show on the compiled and compressed main.js file, but I've managed to track it down to the getClientWidth function.

[jameson5555]

It looks like this error is happening whenever Tiny Slider is unable to get a width for the parentNode. I'm able to reproduce it consistently in a WYSIWYG editor that is creating a race condition, so it iterates upward until it gets to the root and throws the error. Changing the getClientWidth function to the following (adding conditionals to the end) fixes it. I put a PR up with this fix here: https://github.com/ganlanyuan/tiny-slider/pull/614

  function getClientWidth (el) {
    if (el == null) { return; }
    var div = doc.createElement('div'), rect, width;
    el.appendChild(div);
    rect = div.getBoundingClientRect();
    width = rect.right - rect.left;
    div.remove();

    if (width) {
        return width;
    } else if (el.parentNode.parentNode !== null) {
        getClientWidth(el.parentNode);
    } else {
        return;
    }
  }

[runbmp]

I just ran into this the other day, thanks for the PR! Hopefully it gets in soon.

[mrksmts]

Same here! Would be great to have the PR or a fix merged anytime soon.

[jameson5555]

I gave up waiting and ended up forking the repo with my fix in it and using that.

[christophberinger]

@jameson5555 Thank you for fixing this. If you don't mind, could you provide me with the dist tiny-slider.js, as I'm not expert enough to compile my own from your repo. Thanks a lot!

[jameson5555]

@christophberinger Here's the JS file with my fix in it: https://github.com/jameson5555/tiny-slider/blob/master/src/tiny-slider.js

The way I implemented it was through node, adding it as a dependency to my package.json like this: "tiny-slider": "https://github.com/jameson5555/tiny-slider.git".

[christophberinger]

Thanks a lot @jameson5555

[IgorSilvestre]

Same problem on macOS arm: Version 103.0.5060.134 (Official Build) (arm64)

OBS: I was using it to build an overlay