search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.64k stars 658 forks source link

Lazy initialization of library breaks click on iPhone #1246

Open mihalikv opened 1 year ago

mihalikv commented 1 year ago

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 image

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 image

leongersen commented 1 year ago

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 commented 1 year ago

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

mihalikv commented 1 year ago

https://github.com/leongersen/noUiSlider/assets/10236315/d8d0efb5-cc66-41a8-8c5a-f6845bcf2c3e

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

leongersen commented 1 year ago

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

mihalikv commented 1 year ago

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 image

Unfortunately, I cannot find any related articles about this kind of bug. Maybe this is related in some way https://github.com/angular/angular/issues/50230