Inline Elementor generated CSS present on some pages but not others causing issues with elements that are present on all pages

[Code-Bear]

Prerequisites

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

Description

After updating to the latest stable version of Elementor Version 3.5.3 I noticed additional space above my hero image section on certain pages. After spending way too long trying to track down what was causing I noticed that some pages had additional CSS inline on the page. Below is an example of the inline CSS being added to certain pages.

<style>
    /*! elementor - v3.5.3 - 28-12-2021 */
    .elementor-widget-image {
        text-align: center
    }

    .elementor-widget-image a {
        display: inline-block
    }

    .elementor-widget-image a img[src$=".svg"] {
        width: 48px
    }

    .elementor-widget-image img {
        vertical-align: middle;
        display: inline-block
    }
</style>

The specific styling that is messing up the height of my header on those pages is .elementor-widget-image img { vertical-align: middle; }. The problem isn't the additional styling, it is the fact that it is only happening on like half the pages. Other pages don't have that the additional inline styling it looks different. I am not sure why there is inline and external CSS being generated by Elementor but for whatever reason, it isn't being done on all pages.

Steps to reproduce

I am not really sure how to explain how to recreate the issue. I have a header section with the sticky option turned on. An image in the left column and a menu in the right. This is the default header for all pages. I set the header section to heave a -116 margin-bottom so that the hero image would fall behind the header section and stop at the top of the page. On pages where the inline CSS isn't present it leaves a white gap a the top of the page. I have tested with the Hello Elementor theme as well as the default WP theme and the inline CSS is still present on some pages but not others.

When looking at the source code for different pages I also wanted to check if more inline code is being injected from Elementor. I searched for /*! elementor - v3.5.3 and found there are plenty of inline styling being added to both the working pages and the broken pages but the specific styling above isn't present in numerous pages.

My caching is disabled I have tested on multiple browsers and even different PCs. Your support staff was able to see the issue on there as well. I have also made updates to all the pages attempting to see if I could get Elementor to correct the problem. I have also regenerated the CSS & Data with Elementor > Tools > Regenerate CSS & Data with no success.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

Environment

System Info

== Server Environment ==
Operating System: Linux
Software: LiteSpeed
MySQL version: Ubuntu 20.04 v10.3.32
PHP Version: 8.0.13
PHP Max Input Vars: 1000
PHP Max Post Size: 128M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 5.8.2
Site URL: https://dev.brightray.com
Home URL: https://dev.brightray.com
WP Multisite: No
Max Upload Size: 128 MB
Memory limit: 256M
Permalink Structure: /%postname%/
Language: en-US
Timezone: 0
Admin Email: webmaster@brightray.com
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor Child
Version: 1.0.1
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 2.4.2
Parent Theme Author: Elementor Team

== 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/96.0.4664.110 Safari/537.36

== Active Plugins ==
Elementor
Version: 3.5.3
Author: Elementor.com

Elementor Pro
	Version: 3.5.2
	Author: Elementor.com

JetElements For Elementor
	Version: 2.6.1
	Author: Crocoblock

LiteSpeed Cache
	Version: 4.4.6
	Author: LiteSpeed Technologies

== Elements Usage ==

footer : 1
	heading : 1
	icon-list : 1
header : 1
	nav-menu : 1
	theme-site-logo : 1
wp-page : 4
	button : 4
	flip-box : 3
	heading : 26
	icon-list : 2
	image : 5
	jet-pricing-table : 3
	text-editor : 5
	toggle : 4

== Elementor Experiments ==
Optimized DOM Output: Active by default
Improved Asset Loading: Active by default
Improved CSS Loading: Active by default
Inline Font Icons: Inactive by default
Accessibility Improvements: Active by default
Import Export Template Kit: Active by default
Additional Custom Breakpoints: Active by default
Hide native WordPress widgets from search results: Active by default
Default to New Theme Builder: Active by default
Hello Theme Header & Footer: Active by default
Landing Pages: Active by default
Color Sampler: Active by default
Favorite Widgets: Active by default
Admin Top Bar: Active by default
Form Submissions: Active by default
Scroll Snap: Inactive by default

== Log ==

Log: showing 12 of 122021-12-02 15:24:15 [info] elementor-pro::elementor_pro_updater Started
2021-12-02 15:24:15 [info] Elementor Pro/Upgrades - _on_each_version Start
2021-12-02 15:24:15 [info] Elementor Pro/Upgrades - _on_each_version Finished
2021-12-02 15:24:15 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.5.1',
'to' => '3.5.2',
)]
2021-12-02 15:24:15 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.5.1',
'to' => '3.5.2',
)]
2021-12-28 15:08:44 [info] elementor::elementor_updater Started
2021-12-28 15:08:44 [info] Elementor/Upgrades - _on_each_version Start
2021-12-28 15:08:44 [info] Elementor/Upgrades - _on_each_version Finished
2021-12-28 15:08:44 [info] Elementor/Upgrades - _v_3_5_0_remove_old_elementor_scheme Start
2021-12-28 15:08:44 [info] Elementor/Upgrades - _v_3_5_0_remove_old_elementor_scheme Finished
2021-12-28 15:08:44 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.4.8',
'to' => '3.5.3',
)]
2021-12-28 15:08:44 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.4.8',
'to' => '3.5.3',
)]

PHP: showing 2 of 2PHP: 2021-12-02 22:13:29 [warning X 7][/home/dev.brightray.com/public_html/wp-content/plugins/elementor/core/common/modules/ajax/module.php::171] Undefined array key "data" [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2021-12-09 18:06:44 [error X 2][/home/dev.brightray.com/public_html/wp-content/plugins/elementor/core/wp-api.php::26] Uncaught Error: Call to undefined function Elementor\Core\get_plugins() in /home/dev.brightray.com/public_html/wp-content/plugins/elementor/core/wp-api.php:26
Stack trace:
#0 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/core/wp-api.php(36): Elementor\Core\Wp_Api->get_plugins()
#1 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/modules/system-info/reporters/plugins.php(44): Elementor\Core\Wp_Api->get_active_plugins()
#2 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/modules/system-info/reporters/plugins.php(75): Elementor\Modules\System_Info\Reporters\Plugins->get_plugins()
#3 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/modules/system-info/module.php(298): Elementor\Modules\System_Info\Reporters\Plugins->is_enabled()
#4 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/modules/system-info/module.php(255): Elementor\Modules\System_Info\Module->create_reporter()
#5 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/includes/tracker.php(228): Elementor\Modules\System_Info\Module->load_reports()
#6 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/includes/tracker.php(467): Elementor\Tracker::get_system_reports_data()
#7 /home/dev.brightray.com/public_html/wp-content/plugins/elementor/includes/tracker.php(135): Elementor\Tracker::get_tracking_data()
#8 /home/dev.brightray.com/public_html/wp-includes/class-wp-hook.php(303): Elementor\Tracker::send_tracking_data()
#9 /home/dev.brightray.com/public_html/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters()
#10 /home/dev.brightray.com/public_html/wp-includes/plugin.php(518): WP_Hook->do_action()
#11 /home/dev.brightray.com/public_html/wp-cron.php(138): do_action_ref_array()
#12 {main}
thrown [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

== Elementor - Compatibility Tag ==

Elementor Pro: Compatible
JetElements For Elementor: Incompatible

== Elementor Pro - Compatibility Tag ==

JetElements For Elementor: Incompatible

[yash19070]

hello

yes i have same issues
elelemtor genrate style tag before widiget div
i need a solution please help

thank you

[Code-Bear]

For me, it looks like the bug was affecting the "Site Logo" widget so we just changed that widget to an "Image" widget and dynamically loaded the image. I can't really advise you with your issue since I don't know exactly what widget is affected but it def looks like a bug with the latest version.

It also looks like the inline CSS is duplicating in different areas of the pages so I am guessing that is also a bug as the entire point of inline CSS would be to make the site run faster but duplicating a bunch of styling is just a nightmare waiting to happen. So hopefully they resolve this soon.

[Code-Bear]

This is the response I got from support. They said they would update this issue but I am not sure when that will happen so I figured I would update it.

The inline style is coming from our Improved CSS Loading feature.

There are two temporary workarounds for this concern:

1.) Disable the Improved CSS Loading feature

2.) Using some lines to avoid the issue without disabling the feature:

.elementor-widget-image {
  text-align: center;
}

.elementor-widget-image a {
  display: inline-block;
}

.elementor-widget-image a img[src$=".svg"] {
  width: 48px;
}

.elementor-widget-image img {
  vertical-align: middle;
  display: inline-block;
}

[avivu]

Hello,
This issue has been resolved in Elementor Pro v3.6.0

Feel free to update

Thanks!

[lukechinworth]

This was happening to me on 3.11. Disabling and re-enabling "improved css loading" fixed it - that is, it made the inline style tag appear on every page, whereas before some pages that needed it were missing it.

[ashbryant]

I'm having this issue also (version 3.13.4 & 3.13.2. pro) Having to do hacky things like this to hide them

body:not(.elementor-editor-active) .elementor-widget-video .elementor-wrapper.elementor-open-inline { display: none; }

[theavic]

I am having the same issue as well

I only discovered this when I tried to style the first descendant of an element, and I found an element with <style> styles </style> in the DOM

[szaleq]

I have a similar issue in Elementor 3.16.3 (with Elementor Pro 3.16.1).

I have two WordPress installations: a staging environment hosted on WP Engine and my local dev install.
Weird thing: on the staging site, Elementor adds <style> tags before some widgets (e.g., Spacer or Heading), BUT in my local install, these style tags are gone, while the same styles are applied from a file located in wp-content/uploads/elementor/css/custom-frontend.css.
This is strange because my local install is a direct clone of the staging site created with the WP Migrate plugin.
What's more, in the database, posts HAVE the <style> tags in their content, but they are not rendered when visiting these posts' pages!

What can be the cause of this?

[puregraphx]

I am having the same issue as well

I only discovered this when I tried to style the first descendant of an element, and I found an element with <style> styles </style> in the DOM

Same annoying 'feature' here. I am also trying to style every 2nd and 3rd element in a Grid Loop, but as nth-child does not take classes (CSS4 does with the of <selector>) the darn <style> is seen as the first child.
Disabling "Improved CSS Loading" does not make any difference.

[Erudition]

Thank you! This fixed it for me, I have a static site so not as much need for lazy loading css