WP Rocket's 'Remove unused CSS' feature is preventing certain pages from loading entirely on certain browsers

Question

Whilst trying to optimise a site I'm working on I've encountered an issue using Wp Rockets 'Remove Unused CSS' feature.

When 'Remove Unused CSS' is activated the pages stop loading altogether on Firefox & Safari (Literally a blank white screen) but works just fine on Chrome. When I originally encountered the issue it was just the CSS that didn't load and all the html still loaded, but after tweaking the settings on WP Rocket to try and fix it it now just appears as a blank white screen. Safe to say I have disabled it for now but is clearly affecting load speed so need to find a solution.

The second symptom of this issue is that when 'Remove unused CSS' is activated i get:

error! required traces gatherer did not run

on Pagespeed insights, and every metric is replaced by a question mark.

All errors disappear when I turn the setting off again, but the load speed is obviously negatively affected.

The issue only affects pages that I used Elementor (Pro) Page builder to build, other pages that were built with WP Bakery aren't affected and function normally.

These are the affected pages:

spectrum-studios.com
spectrum-studios.com/booking
spectrum-studios.com/contact

I have used this combination of plugins (Elementor & WP Rocket) with the exact same settings before on a different site and encountered no issues.

One big difference between this and the other sites I've built with this combination, is that I used the base Wordpress Theme previously and this time the site had already been half built using a different theme (Salient by Theme Nectar) so my best guess is this has something to do with it as tried de-activating all other plugins that could be affecting this - including firewall - and it has made no difference.

I have tried adding Elementor, Elementor Pro and the Theme to the WP Rocket 'CSS Safe-list', but it made no difference and the issue persisted. I used the following:

/wp-content/plugins/elementor/assets/css/(.*)
/wp-content/plugins/elementor/assets/css/(.*)
/wp-content/themes/spectrum/css/(.*)

I also tried adding every css file from Elementor, Elementor Pro & the theme manually to the safe-list, but again, it made no difference.

Wondering if Elementor could be the issue (as it has some back end features itself) I tried turning all of those features off, such as optimise CSS, but once again.. no difference.

Lastly, I tried de-activating WP Rocket altogether and using the 'Auto-optimise' Plugin to remove & optimise CSS as well - but I encountered the exact same issue.

It is now de-activated but I have basically run out of ideas at this point, loading css asynchronously does work, and provides a slight uptick, so using that for now, but I did manage to get it working on juut chrome, with Pagespeed Inisghts also working and seen how much it will improve the load speed, so could really do with it working!

Any help much appreciated.