Component pages intermittently cause Chrome to become unresponsive

[peterangelov]

Description of the issue

Page Text input will load only partially, then the whole tab crashes with Error code: 5. The page seems to have a problem loading some of the interactive example of component usage.

It works in Safari and Firefox browsers.

Steps to reproduce the issue

Visit https://design-system.service.gov.uk/components/text-input/ using Google Chrome browser on Mac.

Actual vs expected behaviour

N/A

Environment (where applicable)

• Operating system: macOS Ventura, Version 13.1 (22C65)
• Browser: Chrome
• Browser version: Version 109.0.5414.119 (Official Build) (arm64)

[querkmachine]

Hi @peterangelov,

We've been unable to reproduce this problem so far.

Does this happen on any other pages on the Design System website?

Have you tried viewing the page with browser extensions disabled? You may have an extension that's conflicting with something on the page.

Error code 5 can also occur due to a corrupted Chrome installation. You might want to try reinstalling Chrome and seeing if the error persists.

Let us know how you get on!

[peterangelov]

Yes, it looks like it's problem on my side, I will try to solve it. Thanks

[thewilkybarkid]

I see this problem in Brave (on the Radios page too). It also happens in an incognito window, so I don't believe it is related to extensions.

https://github.com/alphagov/govuk-design-system/assets/1784740/fcfaa496-0737-4174-96f1-6e5b7bab038b

• Operating system: macOS Ventura, Version 13.4.1 (22F82)
• Browser: Brave
• Browser version: Version 1.52.129 Chromium: 114.0.5735.198 (Official Build) (x86_64)

I haven't experienced it on other sites and hadn't heard of someone else having the same problem until I saw @seanwiseman's Chrome do the same thing today on the Radios page.

I have previously tried to debug it, but without luck (having the console on when going to the back doesn't show anything).

[domoscargin]

Reopening so we can monitor this now that we've fixed the iframe-resizer issues in #2941

@peterangelov and @thewilkybarkid - let us know if you're still getting the same problem.

[thewilkybarkid]

No luck, unfortunately, @domoscargin, still happening for me on both the text input and radios pages...

[domoscargin]

Logging some related queries here:

https://github.com/alphagov/govuk-design-system/issues/2716#issuecomment-1651500876

https://github.com/alphagov/govuk-design-system/issues/2716#issuecomment-1631461674

[colinrotherham]

@domoscargin An observation from Safari vs. Chrome:

In Safari I'm seeing loading="lazy" iframes load when I scroll down In Chrome I'm seeing loading="lazy" iframes load without scrolling

Perhaps Chrome calculates the page height (or iframe count) and loads them all anyway

Update: Chrome uses quite large "distance-from-viewport" pixel amounts by connection speed: chromium/src/+/main:third_party/blink/renderer/core/frame/settings.json5

[colinrotherham]

@domoscargin An observation from iframeResizer.contentWindow.js

Every <iframe> child element (including every checkbox) gets a big list of event listeners: https://github.com/davidjbradshaw/iframe-resizer/blob/v4.3.6/js/iframeResizer.contentWindow.js#L342

Rather than listening for height changes on every element, could we set a heightCalculationMethod?

[CharlotteDowns]

We've had issues from users on support that are documented in this pull request.

On Wednesday 26 July we had more postings on support about issues.

User 1

Hello. I keep getting an 'unresponsive' error on this page https://design-system.service.gov.uk/components/checkboxes/ . All other design system pages seem fine.

User 2

I have the same issue in Chrome

User 2

Browser and browser version: Chrome 114 Operating system: Mac OS Ventura 13.4.1 (c) Machine: CPU 2.3 GHz 8-Core Intel Core i9, RAM 16 GB 2667 MHz DDR4 Number of tabs: Not a huge number of tab 15-20 odd

User 3

Yes this is the same experience as on the Radio pages that I previously raised and you tried to fix. Chrome 115 Windows 11 3 Chrome windows, failed in one with 4 tabs, Fails even just when page loads without scrolling

https://github.com/alphagov/govuk-design-system/assets/56260216/060f1eb4-de76-4150-852b-bb018fcfd213

User 1

Sorry - didn't spot this yesterday. My set up is the same as User 2, with just the processor being slightly different: 2.6 GHz 6-Core Intel Core i7 I also had considerably more tabs open. An embarrassingly high number - as I do now - but strangely, I'm not getting the problem today.

User 4

I've also had this issue a few times in chrome on a GDS issued M2 MBP. I'm still trying to pin down a repro case for you

[oscarduignan]

for me it triggered more with disable cache checked in devtools. The requests that hang were the ones loading examples within iframes - and in devtools said it was taking like 30s to download the pages (and sometimes that caused it to display that error, I guess reaching some time limit in browser)

edit: also tested with preview version https://release-5-0--govuk-design-system-preview.netlify.app/ and got same issue

other characteristics, CPU at close to 100% while it's loading before it crashes

and I tested with no extensions and in incognito, with intel mac running chrome version 114.0.5735.248 (Official Build) (x86_64)

Edit: updated to chrome 115 and stopped being able to recreate the issue 🤷‍♂️

[colinrotherham]

Thanks @oscarduignan, that's very helpful

I've just done a performance recording in the Chrome developer tools

Two of our longest running tasks are coming from Google Tag Manager gtm.js and analytics.js code

[titlescreen]

I'm getting the same on Chrome 115, macOS 13.5.

It renders the full height of the page, gets half the content in then hangs. Clicking on a link to view the HTML code causes it to show the Page Unresponsive dialogue.

[colinrotherham]

Thanks @titlescreen

At the bottom of the Cookies page can you see if analytics cookies are turned on?

I'm wondering if that makes any difference

[titlescreen]

Thanks @titlescreen

At the bottom of the Cookies page can you see if analytics cookies are turned on?

I'm wondering if that makes any difference

I have cookies turned on, I can still replicate the issue with cookies turned off.

[querkmachine]

Have there been any instances of this happening in other Chromium-based browsers (Edge, Opera, Samsung Internet, Brave, Vivaldi, etc.) or is it only Google Chrome that has the issue?

Might be hard to determine given the market dominance Chrome has, but it may help narrow down a cause if anyone has any info on that.

[thewilkybarkid]

@querkmachine I see it using Brave (https://github.com/alphagov/govuk-design-system/issues/2594#issuecomment-1623715759).

[titlescreen]

@querkmachine there is a bit of a thread on X-gov slack. People seem to think it could be due to Chrome loading all (the ones in up to 7000px from page top) the iframes simultaneously rather than when they appear in the viewport.

https://ukgovernmentdigital.slack.com/archives/C0647LW4R/p1691049497193829

[36degrees]

I've found a crash dump from the one time I've managed to reproduce this, and have used it to raise a bug against Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1469922

Unfortunately it looks like getting any info out of the crash dump ourselves is quite an involved process, so will wait and see if the Chromium team respond first.

EDIT: It looks like because of the way I filed it (via chrome://crashes/) the bug report is not publicly viewable. It said:

Chrome Version: 115.0.5790.114 Operating System: Mac OS X 13.4.1

URL (if applicable) where crash occurred: https://design-system.service.gov.uk/components/summary-list/

Can you reproduce this crash?

No, I've only seen this occur once (which generated the linked crash) but not been able to make it happen again. However, we've had multiple reports of this happening from our users.

This seems to affect multiple pages on our site – possibly related to the way we're using iframes as I'm not aware of any reports on pages that don't include them.

Please see https://github.com/alphagov/govuk-design-system/issues/2594 which includes multiple reports from our users, with further info and videos of the crash occurring.

If it'd be useful to get more crash dumps, I can ask them to turn on crash reporting, send them, and add the crash IDs to this bug report?

What steps will reproduce this crash? (If it's not reproducible, what were you doing just before the crash?)

1. Go to the URL
2. Wait a bit? Maybe scroll down...
3. It might crash (or it might not)

I'll try and keep this issue updated if I get a response.

[colinrotherham]

Morning :wave:

I’ve set up three new Design System previews to rule a few things out

Would you mind taking a look for us please?

1. Downgrade iframe-resizer from 4.3.6 to 3.5.15 https://deploy-preview-3027--govuk-design-system-preview.netlify.app

2. Configure iframe-resizer for reduced CPU usage https://deploy-preview-3028--govuk-design-system-preview.netlify.app

3. Configure iframe-resizer using Intersection Observer
   https://deploy-preview-3037--govuk-design-system-preview.netlify.app

The 2nd example is a little extreme since only the first page load is “auto resized” but it confirms if the large number of event listeners is to blame

Good to rule them out versus the main website

[colinrotherham]

Whilst we gather more feedback, we've had two initial responses

Feedback from #3027 preview 1) and #3028 preview 2)

User 1

I'm not sure what the intended behaviour is, but both 1 and 2 crash fairly quickly for me [on the Checkboxes page].

User 2

Both still crash on the Radio and Checkboxes pages. 3028 perhaps loaded successful the first and maybe another time. But then when I loaded 3027 it too had problems. I closed that instance of chrome and re-opened it. Tried again and they both crashed. Same in another Chrome profile

Feedback from #3037 preview 3)

User 1

That one also becomes unresponsive. There was no noticeable time difference (in chrome, at 400% zoom) between the time it took the other versions to crash and the time it took this one to crash. They're all actually quicker than the main design system page for me - the main design system at least lets me read some of the page before crashing :smile:

[colinrotherham]

User 1 confirms that pages progress from "Page Unresponsive" to "Aw, Snap!" (Error code: 5) after ~1 minute

[colinrotherham]

I've made one more spike to turn off the component previews (no <iframe> elements) entirely:

4. Temporarily disable component previews https://deploy-preview-3040--govuk-design-system-preview.netlify.app/

The page still goes unresponsive and crashes 😣

Analytics on, crashes Analytics off, crashes JavaScript off, works

[jbuller]

4. https://deploy-preview-3040--govuk-design-system-preview.netlify.app/

This causes both Edge and Chrome to spike CPU usage. Both experience crashes on Checkbox/Radio pages.

[joelanman]

The Button component page was unresponsive for me today on Chrome 115, Mac. Recently the component pages have crashed Chrome Android for me on a regular basis, however I cannot replicate at the current time

[colinrotherham]

Going to move this to blocked for now until we either receive:

1. More information from Chrome crash report investigation
2. Confirmation that Chrome v116 has fixed the issue

We've seen some great memory usage drops from the spikes though, so worth continuing

[colinrotherham]

We've not seen any more reports in the last 2 weeks so I'm going to close this one

Can always re-open the issue if Chrome v116 didn't fix it

Thanks all

[thewilkybarkid]

It's working fine in Brave version 1.57.57 (Chromium 116.0.5845.163). 😃