Glide arrow button firing twice on iPhone 11

[mancas11]

When tabbing next/prev button on iPhone 11 glidejs fires two events and slides two times. When tabbing and holding while first transition finishes it onlys fires ones.

I have tested the same slider on iPhone 8 and 6S and there is no issue on these devices.

[DFelten]

We have the same bug on iOS 13. Has anyone found an alternative solution or a workaround?

[DFelten]

A temporary solution is to using a custom method for moving the slider. So just remove data-glide-el="controls" and use instead an own click method with glide.go('>') and glide.go('<').

With glide.go the bug is gone for me.

[ltctech]

<a> tags fire twice. <button> tags fire once. Simple fix.

[PaulPrecept]

<a> tags fire twice. <button> tags fire once. Simple fix.

Not as simple a fix as @ltctech states. I'm not using either <a> or <button> tags and it's doing it on iphone 11. I have a <ul> with data-glide-el="controls" and <li>'s with data-glide-dir values.

Triggers twice on iPhone 11, once everywhere else I've tested.

I followed @DFelten's advice and removed data-glide-el="controls" from my <ul> and added my own click listener which called glide.go( $(this).data('glide-dir') ).

[FernE97]

Removing the data-glide-el="controls" and adding this worked for me.

const glideArrows = document.querySelectorAll('.slider__arrow')

glideArrows.forEach(function(glideArrow) {
  glideArrow.addEventListener('click', function() {
    glide.go(glideArrow.dataset.glideDir)
  })
})

[iKlancar]

For .ts Like stated above, remove data-glide-el="controls" and add the following before glide.mount();

const glideArrowLeft = document.querySelector('.glide__arrow--left')
const glideArrowRight = document.querySelector('.glide__arrow--right')

glideArrowLeft.addEventListener('click', function() {
   glide.go('<');
})

glideArrowRight.addEventListener('click', function() {
   glide.go('>');
})

[PaulPrecept]

Many thanks for your email.

I'm now out of the office until 13th September.

Best wishes Nick

[xfra35]

I faced the same bug, which seems to be related to iOS triggering both click and touchstart event.

Commenting out the line which binds the touchstart event fixed the problem for me:

bind (elements) {
  for (let i = 0; i < elements.length; i++) {
    Binder.on('click', elements[i], this.click)
    // Binder.on('touchstart', elements[i], this.click, capture)
  }
},

[Amarok24]

This bug can even be reproduced in Google Chrome 128 desktop browser, when switching to mobile simulation and doing a somehow longer click on the arrow, approx. 300 or 400 ms. With the mouse button press the slider slides by 1, after mouse button release Glide slides by 1 more. This bug is also still active on iOS 15.8.3

I solved that in a similar way as described above, with own event handlers on my arrow icons, but using "pointerup" events instead of "click".