⛔ 🔗 🧩 📚 Elementor 3.25.3 breaks Lenis Smooth Scroll (Duplicate of #29103)

[sanholo177]

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

We have about 20 websites with Lenis Smooth Scroll + Elementor.
The latest update of Elementor broke the smooth scroll of all the websites.

We troubleshooted and brought it down to the Elementor update.

Steps to reproduce

1. Install a fresh copy of Wordpress + Elementor
2. Initialise gsap + Lenis Smooth Scroll script-src in header using Elementor Custom Code.
3. Add Smooth Scroll parameters in the body using Elementor Custom Code.

Expected behavior

Smooth Scroll work as expected, like it worked with the previous version of Elementor.

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.62 (Debian)
	MySQL version: mariadb.org binary distribution v10.5.26
	PHP Version: 8.1.30
	PHP Memory Limit: 256M
	PHP Max Input Vars: 10000
	PHP Max Post Size: 200M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.6.2
	Site URL: /*Redacted*/
	Home URL: /*Redacted*/
	WP Multisite: No
	Max Upload Size: 200 MB
	Memory limit: 40M
	Max Memory limit: 256M
	Permalink Structure: /%category%/%postname%/
	Language: en_AU
	Timezone: Australia/Sydney
	Debug Mode: Inactive

== Theme ==
	Name: /*Redacted*/
	Version: 2.0.0
	Author: /*Redacted*/
	Child Theme: Yes
	Parent Theme Name: Hello Elementor
	Parent Theme Version: 3.0.2
	Parent Theme Author: Elementor Team

== User ==
	Role: administrator
	WP Profile lang: en-AU
	User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

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

	Elementor Pro
		Version: 3.24.4
		Author: Elementor.com


== Must-Use Plugins ==
	Object Cache Pro (MU)
		Version: 1.16.4
		Author: Rhubarb Group

	WordPress automation by Installatron
		Version: 
		Author: 


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

== Integrations ==
	
	recaptcha_v3: Active


== Elementor Experiments ==
	Improved CSS Loading: Inactive by default
	Inline Font Icons: Active
	Additional Custom Breakpoints: Active by default
	Container: Active
	Upgrade Swiper Library: Active by default
	Nested Elements Performance: Active by default
	Optimized Control Loading: Active
	Optimized Markup: Active
	Conditionally load Swiper CSS files: Inactive by default
	Plugin Onboarding: Active by default
	CSS Smooth Scroll: Active by default
	Default to New Theme Builder: Active by default
	Hello Theme Header & Footer: Inactive by default
	Elementor Home Screen: Active by default
	Landing Pages: Active by default
	Nested Elements: Active
	Editor Top Bar: Active by default
	Pages Panel: Inactive by default
	Element Caching: Inactive
	Link In Bio: Active by default
	Floating Buttons: Active by default
	Elementor Editor Events: Inactive by default
	Atomic Widgets: Inactive by default
	Launchpad Checklist: Inactive by default
	Display Conditions: Active
	Form Submissions: Active
	Menu: Inactive by default


== Log ==
	
Log: showing 20 of 362024-10-09 00:00:27 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.23.4',
  'to' => '3.24.5',
)]
2024-10-09 23:12:52 [info] elementor-pro::elementor_pro_updater Started 
2024-10-09 23:12:52 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-10-09 23:12:53 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-10-09 23:12:53 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.23.3',
  'to' => '3.24.3',
)]
2024-10-10 00:35:09 [info] elementor::elementor_updater Started 
2024-10-10 00:35:09 [info] Elementor/Upgrades - _on_each_version Start  
2024-10-10 00:35:09 [info] Elementor/Upgrades - _on_each_version Finished 
2024-10-10 00:35:09 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.24.5',
  'to' => '3.24.6',
)]
2024-10-10 00:35:09 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.24.5',
  'to' => '3.24.6',
)]
2024-10-10 12:23:19 [info] elementor-pro::elementor_pro_updater Started 
2024-10-10 12:23:19 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-10-10 12:23:19 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-10-10 12:23:19 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.24.3',
  'to' => '3.24.4',
)]
2024-10-10 12:23:19 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.24.3',
  'to' => '3.24.4',
)]
2024-10-30 16:32:46 [info] elementor::elementor_updater Started 
2024-10-30 16:32:46 [info] Elementor/Upgrades - _on_each_version Start  
2024-10-30 16:32:46 [info] Elementor/Upgrades - _on_each_version Finished 
2024-10-30 16:32:46 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.24.6',
  'to' => '3.25.3',
)]
2024-10-30 16:32:46 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.24.6',
  'to' => '3.25.3',
)]

PHP: showing 6 of 6PHP: 2024-09-20 01:58:22 [warning X 9][../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()
',
)]
PHP: 2024-10-09 02:11:53 [warning X 24][../wp-content/plugins/elementor-pro/modules/loop-filter/query/taxonomy-manager.php::150] Undefined array key "logicalJoin" [array (
  'trace' => '
#0: ../wp-content/plugins/elementor-pro/modules/loop-filter/query/taxonomy-manager.php(150): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: ../wp-content/plugins/elementor-pro/modules/loop-filter/query/taxonomy-query-builder.php(33): ElementorPro\Modules\LoopFilter\Query\Taxonomy_Manager -> get_hierarchy_of_selected_terms()
#2: ../wp-content/plugins/elementor-pro/modules/loop-filter/module.php(122): ElementorPro\Modules\LoopFilter\Query\Taxonomy_Query_Builder -> get_merged_queries()
#3: ../wp-includes/class-wp-hook.php(324): ElementorPro\Modules\LoopFilter\Module -> filter_loop_query()
#4: ../wp-includes/plugin.php(205): WP_Hook -> apply_filters()
',
)]
PHP: 2024-10-09 17:47:05 [warning X 4][../wp-content/plugins/elementor/includes/controls/hover-animation.php::165] Array to string conversion [array (
  'trace' => '
#0: ../wp-content/plugins/elementor/includes/controls/hover-animation.php(165): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: ../wp-content/plugins/unlimited-elements-for-elementor-premium/provider/core/unlimited_elements/helper_provider_core.class.php(429): Elementor\Control_Hover_Animation :: get_assets()
#2: ../wp-content/plugins/unlimited-elements-for-elementor-premium/inc_php/unitecreator_params_processor.class.php(1746): HelperProviderCoreUC_EL :: includeHoverAnimationsStyles()
#3: ../wp-content/plugins/unlimited-elements-for-elementor-premium/inc_php/unitecreator_params_processor.class.php(1869): UniteCreatorParamsProcessorWork -> outputHoverAnimationsStyles()
#4: ../wp-content/plugins/unlimited-elements-for-elementor-premium/provider/provider_params_processor.class.php(5328): UniteCreatorParamsProcessorWork -> getProcessedParamData()
',
)]
PHP: 2024-10-09 23:29:29 [warning X 2][../wp-content/plugins/elementor/includes/widgets/video.php::1199] Trying to access array offset on value of type null [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-10-10 00:35:27 [warning X 966][../wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-image.php::40] Undefined array key 1 [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-10-16 14:05:37 [warning X 2][../wp-content/plugins/elementor/includes/controls/hover-animation.php::165] Array to string conversion [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatibility not specified

== Elementor Pro - Compatibility Tag ==

Agreement

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

[sanholo177]

I see these were added on 3.25.0:

• Tweak: Reduced the use of JavaScript for smooth scrolling by implementing a modern CSS-based solution (#13773)
• Tweak: Updated smooth scroll behavior to respect the user's reduced motion preference setting

I'm pretty sure these are conflicting with Lenis Smooth Scroll to a point it's completely unusable.

[m1ga]

hi @sanholo177 I'm using Smooth Scroll and gsap + scrolltrigger too and not have any issues. As I do have a custom plugin for Smooth Scroll I would be interested to know what breaks for you. Any error? Just that I can double check my plugin.

[nicholaszein]

Hi @sanholo177!

Thank you for reaching out! 🙏

While we do not provide support for custom code or 3rd-party software, we understand this change was unexpected. However, this is part of a much requested feature and our plans to improve performance, and we did implement a native CSS Smooth Scroll behavior.

Please refer to this comment on issue #29103 (which is on the same subject) to learn how you can override our implementation.

Since support for Lenis Smooth Scroll is out of our scope, we consider this issue not a bug. Therefore I am closing it as not planned.

We do not have plans to change this feature or add filters to disable it at this time. If you wish to request these capabilities, please submit a new 🚀 Feature Request, and we will consider it in the future if there is enough demand (votes) from other users.

It's our policy to close issues and lock comments once they are closed. Since @m1ga commented asking for more feedback, I will migrate this issue to the Developers Community Discussions Category. You can continue the conversation there.

Kind regards

[ad2003]

Hi! Just got the same problem (I am not using Lenis Smooth Scroll, but the standard elementor (pro) implemenation which worked perfectly fine for a year. I can recreate it on several websites using elementor.
I checked the other comment and added

/* smooth scroll fix */

html { scroll-behavior: smooth; }

which works in Firefox and on mobile brave, but not in brave on desktop.

while

html {
    scroll-behavior: auto;
}

doesn't work at all. I cleaned cache, let elementor recreate files, etc. any idea?
thx

[nicholaszein]

Hi @ad2003,

just to clarify, Elementor adds native CSS smooth-scroll behavior to all websites, but only when your OS is configured to enable system wide, or browser animations. If you disable animations on your Operating System, or on your browser, the smooth scroll setting will return to its default setting defined by the browser or OS.

In your fix, you're just reproducing the same declaration, but without the @media (prefers-reduced-motion: no-preference) query, which determines that the smooth-scroll will only happen if the user hasn't disabled motion effects on their OS or browser. We do not recommend forcing the smooth scroll for all users. Some people have trouble handling the scrolling, and prefer not to see it at all. We think it would be best not to change what is already set by Elementor.

Kind regards

[ad2003]

Hi @nicholaszein thanks for the reply. An option to handle it would be nice - CSS solution or JS. It's pretty tricial to add a js code that handles it, but I went into problems to load it on page and for the pop up menu - it leads to strange behavour. Let's say I want to use the JS way, could you give me tip how to implement it correctly, that it works on page load and when the pop up menu loads up? It works perfectly fine with older version of elementor and I want to stay with that behaviour. I am using a one page layout where all the menu items are pointing to anchors on the page. Thank you.

[nicholaszein]

Unfortunately, I can't @ad2003!

We are unable to provide support for custom code of any kind other than the examples in our Developers Documentation.

[ad2003]

Well, I don't need support for custom code - I am a paying customer and I want the product as it was - and if you change something in the code of the product which breaks my stuff, I am just asking you to provide a fix for it. It worked perfectly fine berfore - without using any custom code - I just want the scroll to behavior as it was before you updated Elementor. At the moment I am forced to use an older version of the Elementor to have smooth scrolling working.

[Erenor]

html { scroll-behavior: smooth; }

Add an important to the line and you're good to go until Elementor provides us with an option:

html { scroll-behavior: none!important; }

I usually hate "important"s, but somethimes they are needed.
A small plugin could be done to add that as a backend option, but I think it's out of the scope for this Q&A :-)