elementor / elementor/elementor
🐞 Bug report: Flexbox Container Sticky issue problem.
- 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 both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.
### Description
This only happens when Flexbox Container is activated.
When sticky is been used on the columns or on any other elements object, as you scroll down the sticky Element it reposition itself in a full size or the columns it gets small and jump to the top or bottom and the object inside the column gets move to the left or right depending where you have position the element content inside that Column.
### Steps to reproduce
1) activate the Flexbox Container
2) Add new container choose the 6th one 25/50
3) Drag image or any element to the left or right column
4) Go to Advance > Motion Effect > Sticky > Turn it on
5) Make sure you have some dummy content on the middle column.
6) Now try to scroll down and see if the sticky column stay on it's position.
### Isolating the problem
- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [ ] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently using the steps above.
### System Info
== Server Environment ==
Operating System: WINNT
Software: Apache/2.4.41 (Win64) PHP/7.4.0
MySQL version: mariadb.org binary distribution v10.4.10
PHP Version: 7.4.0
PHP Memory Limit: 828M
PHP Max Input Vars: 2500
PHP Max Post Size: 800M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 6.0.2
Site URL: http://localhost/demo/1
Home URL: http://localhost/demo/1
WP Multisite: No
Max Upload Size: 800 MB
Memory limit: 40M
Max Memory limit: 828M
Permalink Structure: /%postname%/
Language: en-GB
Timezone: Europe/London
Admin Email: demo@gmail.com
Debug Mode: Inactive
== Theme ==
Name: BuddyBoss Child
Version: 1.0.1
Author: BuddyBoss.com
Child Theme: Yes
Parent Theme Name: BuddyBoss Theme
Parent Theme Version: 2.0.8
Parent Theme Author: BuddyBoss
== User ==
Role: administrator
WP Profile lang: en_GB
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
== Active Plugins ==
Elementor
Version: 3.7.4
Author: Elementor.com
JetEngine
Version: 3.0.3.1
Author: Crocoblock
Post Views Counter
Version: 1.3.11
Author: Digital Factory
User Switching
Version: 1.7.0
Author: John Blackbourn & contributors
WP ULike
Version: 4.6.3
Author: TechnoWich
== Elementor Experiments ==
Optimised 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
Additional Custom Breakpoints: Active by default
Import Export Template Kit: Active by default
Hide native WordPress widgets from search results: Active by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active
Default to New Theme Builder: Active by default
Landing pages: Active by default
Color Sampler: Active by default
Favorite Widgets: Active by default
Admin Top Bar: Active by default
Page Transitions: Active by default
Notes: Active by default
Form Submissions: Active by default
Scroll Snap: Active by default
== Log ==
PHP: showing 2 of 2PHP: 2022-09-02 23:25:36 [notice X 1][C:\wamp64\www\demo\1\wp-content\plugins\elementor\includes\managers\image.php::105] Trying to access array offset on value of type bool [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2022-09-02 23:54:24 [notice X 24][C:\wamp64\www\demo\1\wp-content\plugins\elementor-pro\modules\posts\skins\skin-content-base.php::264] Trying to get property 'ID' of non-object [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
JS: showing 2 of 2JS: 2022-09-03 02:50:36 [error X 2][http://localhost/demo/1/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.7.4:3:767290] Cannot read properties of undefined (reading \'localized\')
JS: 2022-09-03 03:01:44 [error X 2][http://localhost/demo/1/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.7.4:3:646659] this.model.isValidChild is not a function
== Elementor - Compatibility Tag ==
Elementor Pro: Compatible
== Elementor Pro - Compatibility Tag ==
Contributor guide
Research direction
Reproduce the issue with the listed Flexbox Container, 25/50 layout, and Motion Effect sticky steps. Start by tracing the frontend behavior for Flexbox Container and sticky positioning, including the editor.min.js area mentioned in the log. Done means the sticky column or element remains correctly sized and positioned while scrolling, with the reproduction steps no longer showing the jump or horizontal movement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100