✅ 🐞 Bug report: Custom breakpoints/responsive styles issue on templates (type = page) - [ED-10594]

aliboy08 commented 1 year ago

Prerequisites

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

Description

Styles are rolling back to initial values when updating/saving. Some styles are ok like font-size, width. Most are not, like margin, padding, position, z-index, etc. "Regenerate css" fixes it, but whenever you do another update, it rolls back again, and you have to manually click regenerate again.

only elementor and elementor pro plugin is enabled testing with default 2022 wordpress theme (no customizations) hosting = wpengine

Steps to reproduce

To replicate:

enable custom breakpoints
create a sample template with type = page, https://prnt.sc/xJ-eaPewoz5k add some elements and initial styles
load/render the template with hook: e.g: add_action( 'wp_footer', function(){ echo do_shortcode( '[elementor-template id="1510"]' ); });
create 2 new pages:
- one default page (NOT ELEMENTOR)
- another one with Elementor editor enabled
open the two pages separately in different tabs to observe
make responsive/mobile style changes on the template, then view the ELEMENTOR page first, this will trigger the regeneration of css, notice the the styles rolled back to initial styles.
now, do another changes to the template, this time, visit the page that is default wordpress/NOT ELEMENTOR first, which will trigger the css, this time you'll notice the changes willl reflect correctly

Some styles work even without needing to regenerate, e.g: font-size, custom width https://prnt.sc/fQqPgHyvTOhg

Isolating the problem

[X] This bug happens with only Elementor plugin active (and Elementor Pro).
[X] This bug happens with a Blank WordPress theme active (Hello theme).
[X] I can reproduce this bug consistently using the steps above.

System Info

````txt == Server Environment == Operating System: Linux Software: Apache MySQL version: Percona Server (GPL), Release '41', Revision 'da46e5474f9' v5.7.38-41 PHP Version: 8.0.20 PHP Memory Limit: 512M PHP Max Input Vars: 10000 PHP Max Post Size: 100M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 6.0.1 Site URL: https://reputationbstg.wpengine.com Home URL: https://reputationbstg.wpengine.com WP Multisite: No Max Upload Size: 50 MB Memory limit: 512M Max Memory limit: 512M Permalink Structure: /%postname%/ Language: en-AU Timezone: 10 Admin Email: [REDACTED] Debug Mode: Inactive == Theme == Name: Twenty Twenty-Two Version: 1.2 Author: the WordPress team Child Theme: No == User == Role: administrator WP Profile lang: en_AU User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 == Active Plugins == Elementor Version: 3.7.0 Author: Elementor.com Elementor Pro Version: 3.7.3 Author: Elementor.com == Must-Use Plugins == FF Plugin Disabler Version: 2.0 Author: Five by Five FF SSO Version: 1.0 Author: Five by Five Force Strong Passwords - WPE Edition Version: 1.8.0 Author: Jason Cosper WPE ElasticPress Autosuggest Logger Version: 1.0.0 Author: WP Engine WP Engine Cache Plugin Version: 1.0.10 Author: WP Engine WP Engine Seamless Login Plugin Version: 1.6.0 Author: WP Engine WP Engine Security Auditor Version: 1.0.10 Author: wpengine WP Engine System Version: 5.0.1 Author: WP Engine == Elementor Experiments == Optimized DOM Output: Inactive Improved Asset Loading: Inactive Improved CSS Loading: Inactive Inline Font Icons: Inactive Accessibility Improvements: Inactive Additional Custom Breakpoints: Active Import Export Template Kit: Inactive Hide native WordPress widgets from search results: Inactive admin_menu_rearrangement: Inactive by default Flexbox Container: Inactive Default to New Theme Builder: Inactive Landing Pages: Inactive Color Sampler: Inactive Favorite Widgets: Inactive Admin Top Bar: Inactive Page Transitions: Inactive Notes: Inactive Form Submissions: Inactive Scroll Snap: Inactive == Log == Log: showing 20 of 312022-06-22 13:24:21 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.6.5', 'to' => '3.6.6', )] 2022-06-22 15:46:31 [info] elementor-pro::elementor_pro_updater Started 2022-06-22 15:46:31 [info] Elementor Pro/Upgrades - _on_each_version Start 2022-06-22 15:46:31 [info] Elementor Pro/Upgrades - _on_each_version Finished 2022-06-22 15:46:31 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.7.1', 'to' => '3.7.2', )] 2022-08-01 10:26:09 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.6.6', 'to' => '3.6.8', )] 2022-08-01 10:26:11 [info] elementor::elementor_updater Started 2022-08-01 10:26:11 [info] Elementor/Upgrades - _on_each_version Start 2022-08-01 10:26:11 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.7.2', 'to' => '3.7.3', )] 2022-08-01 10:26:12 [info] elementor-pro::elementor_pro_updater Started 2022-08-01 10:26:13 [info] Elementor Pro/Upgrades - _on_each_version Start 2022-08-01 10:26:13 [info] Elementor Pro/Upgrades - _on_each_version Finished 2022-08-01 10:26:13 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.7.2', 'to' => '3.7.3', )] 2022-08-01 10:26:15 [info] Elementor/Upgrades - _on_each_version Finished 2022-08-01 10:26:15 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.6.6', 'to' => '3.6.8', )] 2022-08-09 11:46:32 [info] elementor::elementor_updater Started 2022-08-09 11:46:32 [info] Elementor/Upgrades - _on_each_version Start 2022-08-09 11:46:32 [info] Elementor/Upgrades - _on_each_version Finished 2022-08-09 11:46:32 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.6.8', 'to' => '3.7.0', )] 2022-08-09 11:46:32 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.6.8', 'to' => '3.7.0', )] PHP: showing 5 of 5PHP: 2022-06-15 10:19:57 [warning X 7][/nas/content/live/bigdaddy2021/wp-content/plugins/elementor-pro/modules/posts/skins/skin-content-base.php::264] Attempt to read property "ID" on null [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2022-06-22 15:13:52 [warning X 52][/nas/content/live/reputationbyde/wp-content/plugins/elementor/core/common/modules/ajax/module.php::171] Undefined array key "data" [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2022-06-27 17:02:58 [warning X 1][/nas/content/live/reputationbyde/wp-content/plugins/elementor/includes/managers/image.php::87] Trying to access array offset on value of type bool [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2022-07-15 14:41:16 [warning X 6][/nas/content/live/reputationbyde/wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-number.php::33] Undefined array key 1 [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2022-07-22 13:09:04 [warning X 4][/nas/content/live/reputationbyde/wp-content/plugins/elementor/includes/elements/column.php::1010] Undefined array key "_column_size" [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] JS: showing 6 of 6JS: 2022-06-24 05:03:32 [error X 48][https://reputationbyde.wpengine.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.6.6:2:516092] Cannot read properties of null (reading \'getBoundingClientRect\') JS: 2022-07-01 04:38:40 [error X 2][https://reputationbyde.wpengine.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.6.6:2:344475] NProgress is not defined JS: 2022-07-01 05:39:31 [error X 1][https://reputationbyde.wpengine.com/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: \"view56784\") has already been destroyed and cannot be used. JS: 2022-07-07 03:54:41 [error X 1][https://reputationbyde.wpengine.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.6.6:2:472010] C.$el.resizable is not a function JS: 2022-07-22 01:52:31 [error X 6][https://reputationbyde.wpengine.com/wp-content/plugins/elementor-pro/assets/js/gallery.9c61bb9957e10e6d7bda.bundle.min.js:2:5599] Cannot read properties of undefined (reading \'setSettings\') JS: 2022-07-22 02:41:18 [error X 2][https://reputationbyde.wpengine.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.6.6:2:450631] T.getContainer is not a function == Elementor - Compatibility Tag == Elementor Pro: Compatible == Elementor Pro - Compatibility Tag == ````

aliboy08 commented 1 year ago

did some testing in the core codes on /plugins/elementor/core/files/css/base.php method/function = parse_content

the $initial_responsive_controls_duplication_mode is set to = "off" changing this to "on" seems to fix it.

https://prnt.sc/Mx4r5JwdeRgc

upon checking checking the code /plugins/elementor/core/breakpoints/manager.php description/comment says "When generating Post CSS, the mode is set to 'on'. When generating Dynamic CSS, the mode is set to 'dynamic'." https://prnt.sc/-1BiEnTs2Wyw

Seems like this should be set to "on" but it is currently set to "off" for post

https://prnt.sc/EIVCAEN248Nm

I don't understand exactly how this responsive_control_duplication_mode works, did not reach that far yet.

black-eye commented 1 year ago

I have the same problem. Templates inserted as Tabs content keep loosing their styling after resave. Regenerate css “resolves” the issue, but it’s super annoying.

Btw template styles are not applied in the editor, even after a regenerating. Not sure wheather it’s connected to the issue or not.

FolcWebC commented 1 year ago

The issue is here https://prnt.sc/k0O_gess1C5f

This is the file /elementor/includes/base/controls-stack.php class Elementor\Controls_Stack function add_responsive_control.

If the feature additional_custom_breakpoints is enabled and responsive_duplication_mode is disabled, so in this case responsive settings are missing in control stack and, as a result, no css code is generated. However responsive_duplication_mode is enabled only while generating the main elementor's css code for the page.

black-eye commented 1 year ago

@rami-elementor Any news on this one? It seems @FolcWebC has identified the problem for you. It’s super annoying when editing the templates.

black-eye commented 1 year ago

Any news on this one? It's really annoying problem. I cannot finish a project and say to my client: "after any change in any template you have to go to the Tools and click regenerate CSS". @nicholaszein, could you please look into this problem?

nicholaszein commented 1 year ago

@black-eye It seems like a simple cache issue. Tweaking the cache should be enough to fix it. Some cache engines cache the page before Elementor has had the option to generate the CSS. In this case, it would be better to contact the support for the cache plugin and ask them to add support for Elementor by following this article. Turning off Preloading should fix this as well.

Why this? Well, imagine having hundreds of pages built with Elementor, and you want to regenerate the CSS. It would simply slow your site to a halt if you did this, as Elementor would have to re-generate every single post external CSS at once. What Elementor does is generate the CSS on-demand, which means when someone visits the page. Cache plugins do not visit the pages when preloading the cached version. That's why you lose the style. Because they don't catch the CSS from Elementor to cache it. Proper preloaders will try to render the page first and then cache it after the DOM has finished loading to avoid this issue. But very few do this.

It's also worth mentioning that the 2022 theme, because it's a block-based FSE theme, does not play well with core WordPress functions that Elementor uses to render pages. This can be an aggravating factor. See this article and this article.

However, this issue would require more investigation. @aliboy08 would have to follow the guidelines and test this with Hello Elementor without any cache solution enabled. Not even from the server, and especially from the server, since the server cache doesn't know when a page or an Elementor template is updated. It simply caches anything it can.

black-eye commented 1 year ago

@nicholaszein Well, this issue has nothing to do with caching, there's no chaching on my site (not sure, why do you think so). Also please note, that this issue is present ONLY when custom breakpoints are enabled.

Here's my use case:

Enable Custom breakpoints and add some of them
Create a template or two
Inside those templates create a section with 2 columns
For a medium breakpoint change both column width to 100%
Insert this template (using a shortcode) into a Tabs widget
Check the front end (especially a medium breakpoint) - for now, everything probably looks fine
Go back to the template and make some edit (even text change will do) and save the template.
Check the front end again - the medium breakpoint has now 2 columns instead of one.
Regenerate CSS
Check the front end again - now it's OK
Disable Custom breakpoints and do the edits again - everything works.

So that's it.

nicholaszein commented 1 year ago

Thank you for the detailed steps to reproduce @black-eye! 🙏

I will definitely have to test that and see what I can find. I'll get back to you as soon as possible!

doronwolf commented 1 year ago

Hi @black-eye I'm trying to replicate the bug using the steps you mentioned here it seems I succeed to do so only if I'm not using the 'shortcode widget' for example, if I'm using a shortcode inside the HTML widget, the issue will happen BUT if I'm using the 'Template Widget' to show the page template or even when using the 'shortcode widget' to place the shortcode inside the tabs (instead of using HTML widget or title widget or text editor widget, etc.) - issue won't happen, can you confirm?

ronaldpostma commented 1 year ago

Hi @black-eye I'm trying to replicate the bug using the steps you mentioned here it seems I succeed to do so only if I'm not using the 'shortcode widget' for example, if I'm using a shortcode inside the HTML widget, the issue will happen BUT if I'm using the 'Template Widget' to show the page template or even when using the 'shortcode widget' to place the shortcode inside the tabs (instead of using HTML widget or title widget or text editor widget, etc.) - issue won't happen, can you confirm?

Hi @doronwolf this issue occurs more generically than what has been mentioned here and as @black-eye has described. This issue is the same as #16819 - which has been open and unanswered for more than a year.

Recap of the #16819 issue: When the custom breakpoints are turned on and used, css is applied incorrectly when any 'Single' or 'Archive' template from the Theme Builder is applied to the page content. When regenerating the css via Elementor settings, it will work only for the first page refresh. As soon as you reload or load another page that uses a 'Single' or 'Archive' template, css again does not display the correct settings from the custom breakpoints.

doronwolf commented 1 year ago

Hi @ronaldpostma thank you for your clarification, I'll try to investigate the issue further 🙏

ronaldpostma commented 1 year ago

Thanks @doronwolf - a suggestion for users that might be a workaround, that I'm now going to use in stead of custom breakpoints:

With the release of Elementor 3.10 you can now enter custom units and css functions, and with for example clamp() you can still incorporate some advanced responsiveness while only using the default Elementor (3) breakpoints: https://developers.elementor.com/elementor-3-10-developers-update/ https://css-tricks.com/simplified-fluid-typography/

black-eye commented 1 year ago

Hello @udidol @nicholaszein, could you please give us the status of this bug fix?

I've tried 3.12 beta and the isue is still there.

In the post https://developers.elementor.com/elementor-3-12-developers-update/ it is mentioned the Custom Breakpoints feature will be set to active by default in 3.12. Which I don't find very fortunate, since the Custom Breakpoints is the feature causing this problem.

doronwolf commented 1 year ago

Hi @black-eye a fix is on the way, hopefully, it will be out in v3.11.6

jeisblack commented 1 year ago

Hi everyone, any news about the issue, it has been a lot of time .

doronwolf commented 1 year ago

sorry, it's still in progress, hope it will be ready as part of v3.12.1 but I can't guarantee

FabianKielmann commented 1 year ago

@doronwolf any updates? A lot of people are awaiting a bugfix. I just didn't open another issue on it, yet I have the same problem.

jeisblack commented 1 year ago

With this issue Custom Breakpoints is useless. Sometimes even if I do a Css Regenerate the bug still exists. After 2 or 3 times sometimes is beeing fixed but after some reloads of the page with a single template the issue comes back.

Irinel123 commented 1 year ago

+1 I have the same problem for blog/category carpentry

DerDomee commented 1 year ago

The fix already got delayed multiple times, it slowly gets annoying. Is there a realistic timespan for when this gets resolved?

jeisblack commented 1 year ago

Most of the websites has Post or Product Archives and Single Posts or Single Products. And the problem is only on those templates. I have seen a lot of reports about this. I have 48 websites with Elementor and all of them can not use custom breakpoints.

Also the issue appears to be on Popups not only Templates. In Popups I have discovered usually affect images that don't work as expected sizes of the custom breakpoints.

Gabriel-FYRRTE commented 1 year ago

We all need the fixing update ASAP! Can't build anything without laptop custom breakpoint

Gabriel-FYRRTE commented 1 year ago

Any updates? @doronwolf 😔

doronwolf commented 1 year ago

Hi @Gabriel-FYRRTE I want to assure you that we are well aware it takes longer than expected and the impact it has on your and so many other users, and we take it very seriously. Our team is working diligently to resolve the issue, and we appreciate your patience and understanding. The delay in resolving the bug is caused because of our process to solve this issue from its roots once and for all and I really hope to get back to you with some good news as soon as possible.

StenderIternum commented 1 year ago

@doronwolf regarding this comment : https://github.com/elementor/elementor/issues/19394#issuecomment-1488039832

This didn't get fixed in 3.12.1 after all - The bug is still there.

doronwolf commented 1 year ago

Hi @StenderIternum - you are correct, I'm afraid it takes longer than expected - its still in the works - but we are on it

StenderIternum commented 1 year ago

@doronwolf It seems like it is especially a problem on archive pages. Category templates etc.

Web-ArtCreativeDesign commented 1 year ago

The error still exists.

kremstt commented 1 year ago

@doronwolf Is there any possibility the problem to be fixed in the next few weeks (2-3-4)? Please, this is all getting super overwhelming...

doronwolf commented 1 year ago

We have an initial patch ready that is currently in the final stages of testing before release, it's a very sensitive area and we try to release a fix that won't cause new issues, once the testing will succeed - the patch will be out, I can't tell exactly when but should be very soon, I'm so sorry it takes so long.

hdchurchill commented 1 year ago

I hope and pray it's soon :) this has got to be the biggest Elementor bug and it's been a PITA for years

Gabriel-FYRRTE commented 1 year ago

Any news about the update?

giorgosxxx commented 1 year ago

Guys any news? I need a fix asap. I have 40 websites live...

doronwolf commented 1 year ago

I'm sorry it's been delayed so much longer than expected, as it seems right now the patch should be released in 3.14.0 beta1

On Sun, May 21, 2023 at 4:34 PM giorgosxxx @.***> wrote:

Guys any news? I need a fix asap. I have 40 websites live...

— Reply to this email directly, view it on GitHub https://github.com/elementor/elementor/issues/19394#issuecomment-1556181958, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVJSJVQ3HJQEUEDOZXW3ESTXHIKUPANCNFSM557OJQXQ . You are receiving this because you were mentioned.Message ID: @.***>

Michaelgimii commented 1 year ago

Hi @doronwolf

Are you from the Elementor team? Is it known when the 3.14 beta will be released?

hdchurchill commented 1 year ago

Soon™️

doronwolf commented 1 year ago

Hi @Michaelgimii - yes I'm. The 3.14 beta doesn't have a final release date yet

doronwolf commented 1 year ago

UPDATE: hopefully 3.14 first beta (that includes the fix) will be released this Sunday (28th of May)

make sure to upgrade both Core and Pro since the fix needs them both upgraded in order to work properly we believe the fix is stable (this is part of the reason it took us long time to release it) but still - please - first test it on a staging site

doronwolf commented 1 year ago

Update: moved to 3.14 2nd beta that should be out this Tuesday ..sorry guys, this is supposed to be the last delay 🙏

modreness commented 1 year ago

I hope it will be fixed tomorrow. This is really big problem.

modreness commented 1 year ago

I tried 3.14 beta2, but there is another problem, on pages where I have loop grids, it show just one loop, other (second) loop is missing, I tried regenerate and it appears once time, when refresh page it disappear again.....

This is really big problem. Additional breakpoints are not usable. When you will release fix for this problems?

doronwolf commented 1 year ago

Hi @modreness I tried and tried to reproduce the issue you described and failed - I'm not sure it's related to the beta version - but I do want to help you get to the bottom of it and help you solve it - can you open a new issue - including your system info and steps to reproduce (and if possible link to the relevant page and/or video of the issue)? it will tremendously help us debug it

modreness commented 1 year ago

Yes offcourse, I can record video too. And I have opened ticket on elementor support.

modreness commented 1 year ago

Do you want me to open here new issue on github or ticket on new ticket?

modreness commented 1 year ago

Hi @modreness I tried and tried to reproduce the issue you described and failed - I'm not sure it's related to the beta version - but I do want to help you get to the bottom of it and help you solve it - can you open a new issue - including your system info and steps to reproduce (and if possible link to the relevant page and/or video of the issue)? it will tremendously help us debug it

There is new issue: https://github.com/elementor/elementor/issues/22625

Comenumerique commented 12 months ago

Hi, yes I have the same issue, and I'm supposed to put this website online for my client, this week. What is happening ? I pay so much for Elementor and Elementor pro, and this tool have so much bug right now. Last week it was an Safari issue and now this. To fix the issue, I have to correct my breakpoint on the page that appears in the wrong way, and then it's ok. But on the other page everything is upside down. What do I tell my client ? Please help us ! Sorry for my english I'm french

Gabriel-FYRRTE commented 12 months ago

@Comenumerique , is nothing we can do until 3.14 2nd gets out of beta

doronwolf commented 12 months ago

there is a good chance the fix will be available this Thursday in 3.14.0 beta 3 again, will need to update both pro & core for the fix to be fully effective

doronwolf commented 11 months ago

Version 3.14.0-beta3 (core & pro) is out! please test it (on a staging site!) and let us know if you are still experiencing the issue 🙏

modreness commented 11 months ago

Great, I will test right now :)

elementor / elementor