`revealjs`: Cannot advance slides past second slide on mobile with `scrollable: true` in yaml header

[adamoshen]

Bug description

Issue: For revealjs presentations, if scrollable is set to true in the yaml header, when viewing the slides on mobile, the user cannot swipe past the second slide (the slide that comes after the title slide). Swiping backward from the second slide does not work either.

Minimal qmd example here but also included below:

---
title: "Can't swipe on mobile"
format:
  revealjs:
    touch: true
    scrollable: true
---

## Slide 1

I can swipe to this slide, but can't swipe any further on mobile.

## Slide 2

slide 2

. . .

blah

## Slide 3

slide 3

## Slide 4

slide 4

The rendered slides are here which you can try on your mobile device. I have also tried using Chrome's devtools to toggle between various other mobile devices such as the iPhone 12 Pro, iPad Air/Mini/Pro, Samsung Galaxy S20 Ultra, etc., none of which are able to swipe past the second slide either.

If you use the sidebar menu to go to the slide titled "Slide 2", swiping does not let you go through the . . . pause either.

The current workarounds to this is seem to be:

• display the navigation controls on the slides
• use the sidebar menu to jump between slides, but will need to do this for every slide, and cannot proceed between incremental phases of a slide (e.g. if there is a . . . pause)
• click on various portions of the progress bar to jump to a slide (very inaccurate)

> sessioninfo::platform_info()
 setting  value
 version  R version 4.1.3 (2022-03-10)
 os       Windows 10 x64 (build 19043)
 system   x86_64, mingw32
 ui       RStudio
 language (EN)
 collate  English_Canada.1252
 ctype    English_Canada.1252
 tz       America/New_York
 date     2022-10-06
 rstudio  2022.07.2+576 Spotted Wakerobin (desktop)
 pandoc   2.17.1.1 @ C:\\Users\\Adam\\AppData\\Local\\Pandoc\\pandoc.exe

> quarto --version
1.2.188

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[dragonstyle]

Thanks for reporting this - unfortunately I can't seem to reproduce the problem with an actual phone (either by visiting your published site, or by publishing it myself). I'm testing using Safari on an iPhone and iPad (don't have an Android device to test with). I wonder whether the issue is specific to the developer tools or whether you've seen it on a device and if so, what type of device?

[adamoshen]

The devices I'm using to view it are:

• OnePlus 5 running Android 10. Have tried using both Google Chrome and Opera Touch browsers
• OnePlus 10 Pro running Android 12. Have tried using Google Chrome and Opera Touch browsers

I have also just tested it on a Microsoft Surface Pro 8 tablet running Windows 11 using both Google Chrome and Microsoft Edge. Using only the touchscreen, I am experiencing the same issue where I am unable to swipe past the second slide.

[dragonstyle]

I can confirm that there does appear to be an issue with Android devices specifically and scrollable divs (there is a reveal issue from 2015 referencing just this hakimel/reveal.js#1176).