search

elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.58k stars 1.42k forks source link

Parallax BG image position bug on initial page load #7628

Closed squadcar closed 5 years ago

squadcar commented 5 years ago

Prerequisites

Description

First off, nice work on the new motion updates. A bunch of welcome new features.

When using the new Scrolling Effects/Vertical Scroll (Parallax) on a background image, the initial image scrolls into view on page load. It seems to be incorrectly positioned right off the bat, and then animated into position.

Steps to reproduce

  1. New page
  2. Choose elementor canvas
  3. Add two new sections, set both to full screen height (for scrolling purposes).
  4. Add image to first section BG (position and size don't seem to matter).
  5. Set vertical scroll to 10.

http://dev.squadcar.ca/lwsd/parallax-test/

Isolating the problem

Environment

System Info == Server Environment == Operating System: Linux Software: Apache/2.2.34 MySQL version: Percona Server (GPL), Release 79.0, Revision 2084bdb v5.6.33-79.0 PHP Version: 7.2.12 PHP Max Input Vars: 1000 PHP Max Post Size: 513M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 5.1.1 Site URL: http://dev.squadcar.ca/lwsd Home URL: http://dev.squadcar.ca/lwsd WP Multisite: No Max Upload Size: 512 MB Memory limit: 256M Permalink Structure: /%category%/%postname%/ Language: en-US Timezone: 0 Debug Mode: Inactive == Theme == Name: Twenty Nineteen Version: 1.3 Author: the WordPress team Child Theme: No == User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36 == Active Plugins == Elementor Version: 2.5.10 Author: Elementor.com Elementor Pro Version: 2.5.1 Author: Elementor.com == Log == : JS: showing 2 of 2JS: 2019-03-21 19:18:20 [error X 3][http://dev.squadcar.ca/lwsd/wp-content/plugins/elementor/assets/js/editor.min.js?ver=2.5.9:2:75360] setting getter-only property \"type\" JS: 2019-03-26 17:55:29 [error X 1][http://dev.squadcar.ca/lwsd/wp-content/plugins/elementor-pro/assets/js/editor.min.js?ver=2.5.1:2:16052] Cannot read property \'model\' of undefined Log: showing 18 of 182019-03-26 17:25:15 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.5.9', 'to' => '2.5.10', )] 2019-03-26 17:25:47 [info] elementor-pro::elementor_pro_updater Started 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_form Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_form Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_woocommerce_menu_cart Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_woocommerce_menu_cart Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_posts Start 2019-03-26 17:25:47 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.4.8', 'to' => '2.5.1', )] 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_posts Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_portfolio Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_portfolio Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_products Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_products Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_sitemap Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_sitemap Finished 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_popup_border_radius Start 2019-03-26 17:25:47 [info] Elementor Pro/Upgrades - _v_2_5_0_popup_border_radius Finished 2019-03-26 17:25:47 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.4.8', 'to' => '2.5.1', )] ```
squadcar commented 5 years ago

After poking around, I think this is happening due to the css transition rule being loaded in frontend.css, and the transitioned properties (in this case translateY) being added inline to the element (.elementor-motion-effects-layer) after the element is loaded into the dom. Ends up with a transition between the default property (translateY: 0?) and whatever gets added inline to the element (in this case roughly translateY: -600px).

shilo-ey commented 5 years ago

Hi @squadcar

This is the behavior of the parallax effect which is caused by the process of:

This process creates a starting animation.

The only way to walk around this behavior is to set entrance animation to the entire section.

Thanks!

squadcar commented 5 years ago

So you're saying this is the expected behaviour? Because if so, this is usable only on very basic websites with very un-discerning clients.

birdbrainsolutions commented 4 years ago

So what is the solution to this? I'm getting the same issue without any parallax effects

austinsparx commented 4 years ago

Adding my voice to this comment too - essentially I can't get a nice Parallax effect on using motion effects for a background image without a really ugly jump on page load.

As @squadcar said - this really does make it unusable for a parallax effect which is now so common in web design that clients and customers regularly ask for it.

I have used EA Addons which has a parralax option which works better than default Elementor and doesn't experience this jump on page load, however it is unfotunate to have to install a third party add on both for cost and performance. https://essential-addons.com/elementor/parallax-scrolling/

superuserpro commented 2 months ago

https://csser.space/questions/adjusting-background-position-x-while-scrolling