search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.24k stars 1.29k forks source link

Android Chrome crashing #3339

Open GodjeNl opened 2 years ago

GodjeNl commented 2 years ago

Information: Reproduced on a smartphone with Chrome 98.0.4758.87 on Android 11

I'm not sure this happens to the latest version, but assuming prismjs.com uses the latest version I'm pretty sure it does.

Steps to reproduce: Go on your mobile chrome browser (not desktop-chrome with emulation) to https://prismjs.com and see the whole browser is crashing.

RunDevelopment commented 2 years ago

I was able to reproduce this on my phone. However, the browser doesn't crash, it freezes. (This reminds me of #2062.)

The good news is: only prismjs.com seems to be affected. It tested a few other websites that I know use Prism, and they worked just fine.

I tried doing a bit of remote debugging, but my browser freezes and ends communication before I get any performance profiles, so no luck there.

GodjeNl commented 2 years ago

On my website this also occurs. Check https://godje.nl/code/TransIP-REST-API for a reproduction. So this issue is not prismjs.com specific.

RunDevelopment commented 2 years ago

I cannot fully reproduce it on godje.nl. My phone freezes for about 5-10 seconds and then everything works as normal.

However, this is perfect. It means that I can actually profile the page while it's loading (and freezing). Here's the profile: Profile-20220215T153816.zip

image

From the profile alone, it seems like nothing is wrong. The browser is idling 94% of the time. Prism itself took 60ms.

My guess is that Prism adding hundreds of DOM nodes causes from sort of worst-case behavior in the renderer or input manager. This is something that Chrome has to fix.

@GodjeNl I will report this bug to the Chrome devs. Your website reproduces this bug well (and in a way that is useful). Is your website going to stay online in the next few days/weeks? I want to use it as an example alongside prismjs.com.

GodjeNl commented 2 years ago

Yep, I won't take the website offline.

RunDevelopment commented 2 years ago

I submitted a bug report.

I will leave this issue open for now in case we find any workarounds that can be applied at the library-level. Otherwise, this is an issue that Chrome has to fix.

RunDevelopment commented 2 years ago

@GodjeNl May I ask what android phone you used? The folks at Google have trouble reproducing the issue on their phones.

(If you want to tell the devs directly, you can comment on this bug report I linked above. Otherwise, I will forward your answer to them.)

GodjeNl commented 2 years ago

Thank you for being so helpful to get this issue solved. To answer your question, I use a Motorola G30.

Kielx commented 2 years ago

I also stumbled upon this issue while creating my Next.js blog.

Everything seems to be working fine on Desktop Brave, Desktop/Mobile Firefox, but Chrome 98.0.4758.101 Mobile on my Xiaomi Mi9T with android 10 freezes indefinitely on Prims.js website, and used to freeze for 10-15 seconds on my blog (up until I removed the bigger parts of code - now it freezes for 5 seconds) for example here - https://blog.pantak.net/pl/posts/CppNcurses3 It works fine for other posts with smaller amounts of Prism rendered content like here: https://blog.pantak.net/posts/CppNcurses1

Seems like big lumps of code are causing the issue. I know that this does not bring much but noticed that Chrome Devs mentioned that they have problems with reproducing the bug, so maybe this info will help them somehow.

RunDevelopment commented 2 years ago

The Chrome devs asked which devices reproduce the issue. I created a very simple test page (https://rundevelopment.github.io/2.html) that should cause your browser to freeze for about 10 to 30 seconds.

@GodjeNl and @Kielx, could you please confirm that the freezes occur on the test page as well?

GodjeNl commented 2 years ago

On your test page, my device freezes as well. I did use a Motorola G30 to reproduce this.

RunDevelopment commented 2 years ago

Thank you, @GodjeNl. I'll pass it on to folks at Google.

Kielx commented 2 years ago

I can confirm that my device also freezes on test page.

RunDevelopment commented 2 years ago

Thank you, @Kielx. I'll pass that along as well.

fireattack commented 2 years ago

Can reproduce on https://rundevelopment.github.io/2.html with my phone: OnePlus 6, Android 10, Chrome 100.0.4896.88. (Already posted on bugs.chromium.org).

I firstly encountered it on a 3rd-party website.

sukantatoptal commented 2 years ago

Hi is there any new update or workaround on this bug ?

RunDevelopment commented 2 years ago

any new update

Unfortunately, there hasn't been any progress since April.

workaround

The underlying problem is that Chrome can't handle the many DOM elements Prism (or any syntax highlighter, really) creates to highlight code. Since this is a browser bug, there's nothing you can do besides turning off Prism.

sukantatoptal commented 2 years ago

@RunDevelopment any idea on how this pages are working ? https://css-tricks.com/almanac/properties/g/grid/

RunDevelopment commented 2 years ago

My guess is that the bug in Chrome is a complexity issue. Some operation that was supposed to take O(n) time actually takes O(n^2) or even O(n^3) time. The page you linked only has at most DOM elements per code block, so the bad asymptotic complexity isn't noticeable yet. However, the page that I reproduced it on has around 4600 DOM elements.