Lazy initialization of library breaks click on iPhone

[mihalikv]

Expected Behavior

When I click on "Go to google", browser should redirect to the root.cz.

Current Behavior

When I click on "Go to google", I am still on same page.

Steps to Reproduce

https://jsfiddle.net/v7axdwLm/2/ -> Click on link on iPhone

This is very specific case when there is some custom event listener on document but I can't figured out why noUiSlider should break simple link redirect. Maybe my custom init script is wrong...

Context (Environment)

Tested on real device and also in browserstack

Possible Implementation

I tried to change code of adding event listeners in various way and this change helped but it definitely break rest of the lib

[leongersen]

The lazy init seems to work fine for me, if you click elsewhere in the document.

The reason the Jsfiddle does not navigate is unrelated:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

[mihalikv]

I changed jsfiddle the link in issue https://jsfiddle.net/v7axdwLm/2/

[mihalikv]

RPReplay_Final1684146671.MP4

Recording from real iPhone. You basically need to click twice.

[leongersen]

I don't think that's related to noUiSlider.

[mihalikv]

Yeah it's not related to noUiSlider, it's more like noUiSlider is affected by some of the conventions of safari/iPhone. When you add an element dynamically and then attach the event to it, it will affect clicking anywhere else on the page.

Here is minimal reproduction without noUIslider: https://jsfiddle.net/1ktyhfev/10/
and here is the "fixed" version with setTimeout: https://jsfiddle.net/1ktyhfev/11/

I test it also with "fix" in noUiSlider and it works for me

Unfortunately, I cannot find any related articles about this kind of bug.
Maybe this is related in some way angular/angular#50230