strange issue on mobile browser

[chenxizhang]

Hi

I have a simple page like below, I found the first page had a strange issue on mobile browser

---
marp: true
headingDivider: 3
theme: xizhang
paginate: true
title: Microsoft 365 高手是怎样炼成的
---

#  Microsoft 365 <br /> 高手是怎样炼成的
> 陈 希章 https://365pro.xizhang.com
![bg fit left](images/microsoft-365.png)

it will work fine on PC browser

But it will not work fine on Mobile browser, looks like the image and text can't display correctly.

Can anyone help to test on your device?

The page link is https://365pro.xizhang.com

[chenxizhang]

This issue is only found on page 1.

[yhatt]

It's a known bug of Safari browser itself, but our helper library for Marpit framework also does not apply polyfill correctly because your first slide seems to be changed the DOM structure by #272.

If you are using the plugin from #272, try to swap the order of the slide element and injected scripts.

 // If it is the first slide, prepend <script> tag before the rendered tag.
-if (meta && meta.marpitSlide === 0) return script + rendered
+if (meta && meta.marpitSlide === 0) return rendered + script

[chenxizhang]

WOW, you are a magician, I use if (meta && meta.marpitSlide === 0) return rendered + script and it works now.

[chenxizhang]

@yhatt sorry to bother you. The problem still there and even more complicate. when I open the page on mobile browser, it will refresh again and again, then crash.

Would you please help to take a look into this problem? please open https://365pro.xizhang.com/ or https://365pro.xizhang.com/excel.html

[yhatt]

@chenxizhang We cannot do anything for you because it is due to a long-standing bug of WebKit for over 12 years. See more details in marp-team/marp-core#195.

In many cases, it brings crash in the big HTML slide deck as you shown. However, just rendering a few Marp slides like marp.app seems to make crash in sometimes too.

Apple denies 3rd-party rendering engine in iOS app so all rendering engines are the same WebKit in any iOS browsers (Safari, Firefox, Chrome, Edge, Brave, etc...). For using Marp slides in iOS stably, you have to convert into the stable format like PDF, or raise your voice to Webkit bug tracker.

— marp-team/marp-core#195 (comment)

An upcoming WebKit improvement described in https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/ is still in progress, and I expect it requires more time to make stable rendering (about 2-3 years).

For now, please use PDF instead if you have to deliver large slide to users who use Safari/WebKit browser.

[chenxizhang]

ok, thanks for the clarify