Document viewer left/right page change smartphone issues

[benjaoming]

Observed behavior

The left/right buttons have issues registering click events, both on Browserstack and on real devices.

In some cases the behavior seemed persistent, in other cases it seemed that some click events would pass through.

Tested on iPhone 6 where the Right button persistently doesn't work and the Left button appears to activate text selection.

Works fine on Safari Mac OS etc. and also on narrow window sizes... this behavior seems to be related to click events in iOS and Android.

Expected behavior

Two options

1. the buttons are made to work and register the click events.
2. the buttons are removed and swiping and scrollbar (which work) are used

User-facing consequences

User might give up changing pages since the buttons don't work.

Errors and logs

We haven't seen any useful error messages in JS error consoles :/

Steps to reproduce

Open up Browserstack and navigate to a book. Been testing this on African Storybook.

Context

Reproduced on Browserstack:

• Chrome/Android devices
• iOS (all Webkit browsers)
• Firefox on Android

Seen on:

• Kolibri 0.12
• Kolibri 0.13
• Kolibri 0.13 w/ hashi patch learningequality/kolibri#6719

[nucleogenesis]

I replicate this by using responsive mode in Chrome - when you load ASB in a small window the buttons are not tappable. Making them wider doesn't fix the issue.

The click event is definitely happening because there is a class is-active being added to the clickable item - but the expected effect isn't happening.

This ultimately seems to be an issue with the content source - the buttons are loaded in an iframe.

@kollivier @ivanistheone

[kollivier]

@nucleogenesis @indirectlylit Should we just file a new ticket in the ASB sushi chef repo, link it to this, and then close this ticket (so we don't need to copy and paste all the details)?

[indirectlylit]

there is a 'transfer issue' feature, but I can't find the african storybooks repo. What's it called?