search

NUKnightLab / juxtapose

JuxtaposeJS is a JavaScript library for making before/after image sliders
http://juxtapose.knightlab.com/
Other
844 stars 133 forks source link

Juxtapose inside an iframe does not receive touch events #147

Open karlcow opened 5 years ago

karlcow commented 5 years ago

Steps to reproduce

  1. With Firefox on Android (tablet or mobile)
  2. Go to https://www.lesnumeriques.com/camera-surveillance/netgear-arlo-baby-p37105/test.html
  3. reach the first occurence of juxtapose
  4. Try to slide right or left

Expected The slider is moving

Actual The slider is not moving.

The slider has been added through an iframe.

<iframe class="juxtapose" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=555b52ae-0da7-11e8-b263-0edaf8f81e27&amp;wmode=opaque" width="100%" height="433" frameborder="0"></iframe>

This was initially reported on https://github.com/webcompat/web-bugs/issues/15381

When accessing directly https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=555b52ae-0da7-11e8-b263-0edaf8f81e27&amp;wmode=opaque on a mobile or tablet with Firefox Android, this is working.

karlcow commented 5 years ago

ok found the issue! This is related to https://bugzilla.mozilla.org/show_bug.cgi?id=1178763 because on touchstart in Firefox pageX exists, so we get a negative leftPercent, which then in return makes no sense to move the slider.