WebGL issues with ARM (Mac M1 etc) version of Chrome

[jonnywilliamson]

Just wasted about 5 hours today debugging an issue - whilst not DIRECTLY related to ChromePHP, the lack of clear documentation on some options in ChromePhp did not help.

Quick Background

• Around Chrome V100 ish a bug was introduced that prevented headless chrome for being able to render WebGL content on webpages (https://get.webgl.org/ etc) on ARM compiled chrome binaries.
• Multiple solutions were used to try and work around it --use-angle=gl-egl, --use-angle, --use-gl=egl etc.
• Finally since around Chrome V110 a proper solution was implemented and --enable-gpu was the correct custom flag to use when creating the browser.

The Issue

No matter what I did, I could not get WebGL to work despite trying every combination of flags above.

$browserFactory = new BrowserFactory();

$browser = $browserFactory->createBrowser([
    'headless' => 'new',
    'customFlags' => [
         '--enable-gpu',
         '--remote-debugging-port=9222',
      ],
]);

$page = $browser->createPage();
$page->navigate('https://flightradar24.com')->waitForNavigation();

//$page html shows the browser was not able to render the webGL page.

The Solution

This issue was that when Chrome-Php creates a browser and uses headless = true, or headless=new, it always defaults to the OLD chrome headless mode not the new one. (Because 'new' evals to true it's the same thing).

Because of this all the flags used above have NO affect on the binary!

It wasn't until I saw this issue #498 that I realised I needed to create the NEW chrome headless mode by creating the browser a different way:

$browser = $browserFactory->createBrowser([
    'headless' => false,
    'customFlags' => [
        '--headless=new',
         '--enable-gpu',
         '--remote-debugging-port=9222',
      ],
]);

As soon as I did that, then the flags worked and I can now render all the websites that use WebGL.

Thoughts

Just wanted to have something archived in the issues in case others stumble over the same issue. Perhaps a note might be needed in the docs to remind users that currently the headless boolean option when constructing the Browser will continue to use the OLD chrome headless version.

Hope that helps someone.