Consistent issue with elementor-frontend-inline-css content only partially delivered under Full Page Cache delivery

[T4ngml]

Prerequisites

• I have searched for similar issues in open and closed tickets and cannot find a duplicate.
• I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

It's been years since we're facing this issue.

For some reason, when using W3 Total Cache's Page Cache functionality, randomly, some Elementor pages (not all of them, not always the same...) will be delivered broken.

By broken, I mean it misses some CSS rules, so that the page doesn't look like it should.
Digging a bit deeper, and comparing the same page broken against the expected one, the only single difference seems to reside in the content of the CSS elementor-frontend-inline-css section: on the broken page, this CSS content is empty, or only partially delivered.
So here is how a broken page looks like against the expected one, and you'll find, attached the guilty CSS section's contecnt, for both of them:

The Elementor setup doesn't seem to be involved:

• This occurs whatever the CSS Print Method
• Clear Elementor’s CSS and Data Cache doesn't solve anything either.
• Improved CSS Loading neither

We tested it from multiple server environments, with minimal plugin setup.

Some topics suggest to disable the CSS minifying from W3 Total Cache, or to exclude Elementor from being cacheable , but I experienced both of them myself: it doesn't work, the error still occurs.
Another solution seems be to enable W3 Total Cache's "Late Caching" option, but it doesn't work either.
Finally, I also checked that it's not related with the (automatic) Preload functionnality. Page cache triggerd manually is enough to get the issue.

To my understanding, after countless tests about this specific issue, the problem seems to be that the page caching process sometimes "flashes" the page before all the content has been fully delivered, especially the content of this CSS section: elementor-frontend-inline-css.

The files enclosed, shows that the broken code misses the all of the element-id-... rules.

Having only the very few plugins for our theme to work don't make the issue disappear.
Howver, it also seems that the occurence of this issue might depend on the order in which plugins were activated, since whe deactivating a (supposed) trivial one seems to solve the issue, but reativating it WOULD NOT make the issue appear again.Of course, I ran these tests multiple times, and thought of flushing all W3TC's caches, and the test browser cache between plugins activations/deactivations.

I know I'm not the only one facing this issue, since there are dozens of topics started about that specific problem.
I also know this is not related to a specific cache plugin. A developer I work with, who took an eye to our case, says he faced the very same issue in a couple of projects, also a few years ago. When Elementor was teamed up with W3 Total Cache or WP Rocket to tackle massive Elementor's impact on page time delivery, the same kind of issues occured.

My experience show the same results with W3TC handling all the cache topics, but also when entrusting CSS/JS cache tasks to Autoptimize. And finally with WP Rocket as well.

To my understanding, the problem is, that the Page Cache service sometimes caches the pages / objects a bit too early, so that it misses some part of the expected content. So that once the page is cached, it's consistently delivered broken. So the problem would be that page cache plugins would require a signal to know when the page is fully loaded.

Could you deliver such a signal? Or any other solution?

Honestly, we can get over Elementor's performance impact if using page cache. But if Elementor is prevents us to use page cache, then it's just a no go, and we'll have to abandon your plugin.

Thanks for considering.

Steps to reproduce

1. Enable Elementor
2. Enable W3TC > Page Cache + CSS/JS Minifying (automatic) + Database Cache + Object Cache
3. Purge all caches
4. Load pages as non admin user
5. Get some Elementor broken pages, because of some CSS missing.

Expected behavior

1. Enable Elementor
2. Enable W3TC > Page Cache + CSS/JS Minifying (automatic) + Database Cache + Object Cache
3. Purge all caches
4. Load pages as non admin user
5. Get perfect pages, ALWAYS

Isolating the problem

• This bug happens when only the Elementor (and Elementor Pro) plugins are active.
• This bug happens with the Hello Elementor theme active.
• I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal

== Server Environment ==
	Operating System: Linux
	Software: Apache/2.4.41 (Ubuntu)
	MySQL version: MySQL Community Server (GPL) v5.7.42
	PHP Version: 8.1.27
	PHP Memory Limit: 1536M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 8M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.5.3
	Site URL: https://tiwal.local
	Home URL: https://tiwal.local
	WP Multisite: No
	Max Upload Size: 2 MB
	Memory limit: 1024M
	Max Memory limit: 1536M
	Permalink Structure: /news/%postname%/
	Language: en_US
	Timezone: Europe/Paris
	Debug Mode: Active

== Theme ==
	Name: Tiwal
	Version: 1.0.0
	Author: Marc Boussoulade
	Child Theme: Yes
	Parent Theme Name: Storefront
	Parent Theme Version: 4.5.5
	Parent Theme Author: Automattic

== User ==
	Role: administrator
	WP Profile lang: en-US
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

== Active Plugins ==
	Advanced Custom Fields
		Version: 6.2.9
		Author: WP Engine

	Bread Pay
		Version: 3.5.0
		Author: Bread Pay

	Elementor
		Version: 3.21.5
		Author: Elementor.com

	Elementor Pro
		Version: 3.21.2
		Author: Elementor.com

	Tiwal
		Version: 1.0
		Author: VirtuoWorks

	W3 Total Cache
		Version: 2.7.2
		Author: BoldGrid

	WooCommerce
		Version: 8.8.3
		Author: Automattic

	WPML Media Translation
		Version: 2.7.4
		Author: OnTheGoSystems

	WPML Multilingual CMS
		Version: 4.6.10
		Author: OnTheGoSystems

	WP Store Locator - Widget
		Version: 1.1.1
		Author: Tijmen Smit


== Must-Use Plugins ==
	Asset CleanUp Pro: Plugin Filtering
		Version: 1.0
		Author: Gabriel Livan


== Elements Usage ==
	
	page : 37
		call-to-action : 2
		heading : 65
		html : 18
		image : 50
		shortcode : 4
		testimonial-carousel : 1
		text-editor : 46
		video : 10
	section : 84
		call-to-action : 4
		container : 4
		heading : 60
		html : 4
		image : 49
		image-carousel : 1
		shortcode : 4
		slides : 1
		text-editor : 54
		video : 7
	single : 4
		heading : 1
		html : 1
		image : 1
	wp-post : 9
		call-to-action : 3
		container : 6
		heading : 41
		html : 9
		image : 27
		shortcode : 1
		testimonial-carousel : 1
		text-editor : 21
		video : 5
	wp-page : 104
		call-to-action : 8
		container : 5
		heading : 104
		html : 20
		image : 72
		testimonial-carousel : 1
		text-editor : 45
		video : 6


== Settings ==
	
	cpt_support: post, page, product, sharing, envira
	disable_color_schemes: yes
	disable_typography_schemes: yes
	allow_tracking: yes
	css_print_method: internal
	unfiltered_files_upload: 1
	meta_generator_tag: 1
	disabled_elements: wc-elements, woocommerce-notices, nav-menu, woocommerce-breadcrumb, wpml-language-switcher, wp-widget-wpsl_search_widget, video-playlist, wp-widget-um_search_widget, woocommerce-product-upsell, wp-widget-tag_cloud, stripe-button, audio, social-icons, theme-site-logo, theme-site-title, share-buttons, search-form, reviews, wp-widget-woocommerce_recently_viewed_products, wp-widget-recent-posts, wp-widget-recent-comments, rating, wp-widget-rss, wp-widget-tiwal_promoted_post_widget, progress-tracker, wp-widget-woocommerce_products, wp-widget-woocommerce_product_tag_cloud, woocommerce-product-stock, wp-widget-woocommerce_product_search, woocommerce-product-related, woocommerce-product-rating, woocommerce-product-meta, price-table, price-list, post-comments, paypal-button, lottie, wp-widget-icl_lang_sel_widget, hotspot, wp-widget-woocommerce_price_filter, wp-widget-woocommerce_layered_nav, facebook-comments, facebook-button, facebook-embed, facebook-page, wc-add-to-cart, wp-widget-currency_sel_widget, author-box, woocommerce-purchase-summary


== Features ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrations ==
	
	woocommerce: Active


== Elementor Experiments ==
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active
	Inline Font Icons: Inactive by default
	Additional Custom Breakpoints: Inactive
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active
	Upgrade Swiper Library: Inactive
	Grid Container: Active
	Nested Elements Performance: Inactive by default
	Optimized Control Loading: Active
	Default to New Theme Builder: Active by default
	Elementor Home Screen: Active by default
	Editor Top Bar: Inactive by default
	Build with AI: Active by default
	Landing Pages: Inactive
	Nested Elements: Inactive by default
	Lazy Load Background Images: Active
	Display Conditions: Inactive by default
	Form Submissions: Inactive
	Menu: Inactive by default
	Taxonomy Filter: Inactive by default


== Log ==
	
Log: showing 20 of 372024-04-26 12:31:45 [info] Elementor/Upgrades - _on_each_version Start  
2024-04-26 12:31:49 [info] Elementor/Upgrades - _on_each_version Finished 
2024-04-26 12:31:49 [info] Elementor/Upgrades - _on_each_version Start  
2024-04-26 12:31:51 [info] Elementor/Upgrades - _on_each_version Finished 
2024-04-26 12:31:51 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.1',
  'to' => '3.21.3',
)]
2024-05-02 12:44:04 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.3',
  'to' => '3.21.4',
)]
2024-05-02 12:44:04 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.21.1',
  'to' => '3.21.2',
)]
2024-05-02 12:46:05 [info] elementor::elementor_updater Started 
2024-05-02 12:46:05 [info] Elementor/Upgrades - _on_each_version Start  
2024-05-02 12:46:08 [info] Elementor/Upgrades - _on_each_version Finished 
2024-05-02 12:46:08 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.3',
  'to' => '3.21.4',
)]
2024-05-02 12:46:08 [info] elementor-pro::elementor_pro_updater Started 
2024-05-02 12:46:08 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-05-02 12:46:08 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-05-02 12:46:08 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.21.1',
  'to' => '3.21.2',
)]
2024-05-14 16:01:06 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.4',
  'to' => '3.21.5',
)]
2024-05-14 16:01:06 [info] elementor::elementor_updater Started 
2024-05-14 16:01:06 [info] Elementor/Upgrades - _on_each_version Start  
2024-05-14 16:01:09 [info] Elementor/Upgrades - _on_each_version Finished 
2024-05-14 16:01:09 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.4',
  'to' => '3.21.5',
)]

PHP: showing 2 of 2PHP: 2024-05-06 15:12:17 [warning X 1][../wp-content/plugins/elementor/includes/managers/image.php::113] Trying to access array offset on value of type bool [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-05-07 11:55:40 [warning X 1][../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php::150] Undefined array key "condition_type" [array (
  'trace' => '
#0: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(150): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_template_json_item()
#2: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(120): class type array_map()
#3: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(59): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_templates_json()
#4: ../wp-content/plugins/elementor/data/base/endpoint.php(158): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> get_items()
',
)]



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==

Agreement

• I agree that my issue may be closed without action if it doesn't meet all the requirements.