Google's cache layer layout is messed up

[1122austinchui]

Complete this information to ask your question.

• Are you looking for answers? *
  Can’t find a solution to the problem

Please share your search result URL:
https://pestkillerhk.com/termites

*When you tested your domain with the Cloudflare Diagnostic Center, what were the results? *
Unable to perform Cloudflare Diagnostic Center

Describe the problem you are experiencing:
I use elementor+wp rocket+Cloudflare to build a website, but I found that when Google searches and clicks on the website, the page layout will be messed up. I guess the problem is the cache layer submitted by Cloudflare to Google, because I use https://cachedview.com/
Checking my website’s cache on google found that the page would just be mis-layouted on google’s cache, as shown in the following URL:
http://webcache.googleusercontent.com/search?q=cache:https://pestkillerhk.com/termites/

*What error message or number did you receive? *
No

*What steps did you take to solve the problem? *

no solution found

*What is a domain name? *
pestkillerhk.com

*Did the website use SSL before it was added to Cloudflare? *
yes

What are the steps to reproduce the error:

*Have you tried using another browser and/or incognito mode? *
yes

Please attach a screenshot of the error:
jumbled pages:

normal page:

[cbrandt]

Cloudflare does not interfere with Google crawlers unless you set a Firewall Rule or some other rule to that effect.

Your Google-cached pages do contain all CSS and JS files needed to render the page nicely, but a CORS policy prevents the browser from loading those files from an origin that it’s not the same origin as the HTML (that is, your domain). That’s why pages look messed up.

Changing CORS to allow Google is something you should be able to do at the origin, but that would make your site less secure.