elementor / elementor/elementor
Off-Canvas Widget Causing Page Jumping/Flickering
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
### Prerequisites
- [X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
- [X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.
### Description
I am writing to report an issue with the recently released off-canvas widget in Elementor Pro. The problem arises when the "Disable Page Scrolling" option is enabled.
Issue Description:
When the off-canvas is opened with "Disable Page Scrolling" enabled, the main page scrollbar is removed, and then it reappears when the off-canvas is closed. This removal and reappearance of the main page scrollbar cause the page content to shift, resulting in a noticeable "jump" or "flicker" effect. This issue is particularly evident on desktop devices, while it doesn't affect tablets or mobile devices.
### Steps to reproduce
1. Create a page with enough content (images, headings, and text) to require a scrollbar.
2. Create an off-canvas element using the Elementor Pro off-canvas widget.
3. Enable the "Disable Page Scrolling" option in the widget settings.
4. Open the off-canvas element on a desktop device.
5. Observe the main page content shift when the off-canvas is opened and closed.
### Expected behavior
1.The main page content should remain stable without any noticeable shift or flicker when the off-canvas is opened or closed.
Testing Environment:
To ensure that this issue is not caused by conflicts with other plugins or themes, I have set up a new test site with only Elementor and Elementor Pro installed. The problem still exists in this clean environment.
Example:
On Ikea's product pages, when an off-canvas element is opened, they manage to hide the scrollbar without causing any shift in the page content, indicating that the markup or handling is different and more user-friendly.
Proposed Solution:
Instead of removing the scrollbar, it could be made invisible and scrolling disabled, or the scrollbar could remain present but its functionality disabled. This approach avoids the content shift and provides a smoother user experience.
Benefits:
Prevents the main page content from shifting or jumping.
Provides a smoother user experience on desktop devices.
Eliminates the need for manually adjusting padding values.
I believe implementing this solution will enhance the functionality and user experience of the off-canvas widget.
### Isolating the problem
- [X] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
- [X] This bug happens with the Hello Elementor theme active.
- [X] I can reproduce this bug consistently by following the steps I described above.
### Elementor System Info
Click to reveal
````txt
== Server Environment ==
Operating System: Linux
Software: LiteSpeed
MySQL version: MariaDB Server v10.11.7-MariaDB-cll-lve
PHP Version: 8.1.27
PHP Memory Limit: 1024M
PHP Max Input Vars: 5000
PHP Max Post Size: 256M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 6.5.5
Site URL:
Home URL:
WP Multisite: No
Max Upload Size: 256 MB
Memory limit: 1024M
Max Memory limit: 512M
Permalink Structure: /%postname%/
Language: en_US
Timezone: 0
Debug Mode: Inactive
== Theme ==
Name: Hello Elementor
Version: 3.1.0
Author: Elementor Team
Child Theme: No
== 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/126.0.0.0 Safari/537.36
== Active Plugins ==
Elementor
Version: 3.22.3
Author: Elementor.com
Elementor Pro
Version: 3.22.1
Author: Elementor.com
== Must-Use Plugins ==
Disable Auto Updates
Version:
Author:
== Elements Usage ==
footer : 1
container : 1
heading : 1
header : 1
container : 1
heading : 1
wp-post : 0
button : 3
container : 5
heading : 3
image : 4
off-canvas : 1
text-editor : 1
== Settings ==
cpt_support: post, page
disable_color_schemes: yes
disable_typography_schemes: yes
allow_tracking: yes
unfiltered_files_upload: 1
font_display: swap
== Features ==
Custom Fonts: 0
Custom Icons: 0
== Integrations ==
== Elementor Experiments ==
Improved Asset Loading: Active by default
Improved CSS Loading: Active
Inline Font Icons: Active
Additional Custom Breakpoints: Active
Flexbox Container: Active
Grid Container: Active
Upgrade Swiper Library: Active
Nested Elements Performance: Inactive by default
Optimized Control Loading: Active
Optimized Markup: Inactive by default
Plugin Onboarding: Active by default
Default to New Theme Builder: Active
Header & Footer: Active
Elementor Home Screen: Active by default
Editor Top Bar: Active
Build with AI: Active
Landing Pages: Active
Nested Elements: Active
Lazy Load Background Images: Active
Pages Panel: Inactive by default
Element Caching: Active
Conversion Center: Inactive by default
Display Conditions: Active
Form Submissions: Active
Menu: Active
Taxonomy Filter: Active
== Log ==
````
### Agreement
- [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.
Contributor guide
Assessment
This issue has not been assessed yet.