Marp GitHub Page keeps reloading on mobile.

[PeriHub]

Hi everybody. I've used the awesome marp project to create a few slides and deployed those with GitHub Pages in this repository:
https://github.com/PeriHub/Presentations
Everything works as expected, but when I try to view the slides on mobile, it keeps refreshing the page. I think it has to do with the --html tag.

Does anyone know how to fix that, or is this a known bug with marp and mobile devices?
Thank you!

[yhatt]

That is known issue as a side effect on the large presentation, in the polyfill to fix the wrong scaling of WebKit browsers. Generally it is known that a lot of (scaled) slide pages will bring crash the mobile browser tab by WebKit.

Unfortunately, there are not clear workarounds for now.

Related

• Large(ish) presentation won't open in any iOS browser marp-core#195
• Rendered page does not work on mobile yhatt/marp-cli-example#64

Details

The progress of WebKit

WebKit is still in development on "Layer-Based SVG Engine", to fix the long-standing bug of rendering.

• https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/
• https://wpewebkit.org/blog/05-new-svg-engine.html

We've already confirmed that this engine brings the correct rendering of slides without polyfill. The issue would be resolved if LBSE on WebKit for mobile devices made stable.

Disable polyfill

The injected script provided by Marp Core will apply the polyfill to WebKit browsers.

When you are using Marp CLI, you can try to disable the script injection by the configuration file. In theory, this should fix the crashes on WebKit browsers.

// marp.config.js
module.exports = {
  // Set the constructor options for Marp Core
  options: {
    script: false
  }
}

marp -c marp.config.js

However, you must see some messy scalings caused by a WebKit's long-standing bug instead.