elementor / elementor/elementor
🐞 Background overlay applies 2x to video background fallback images
- 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.
- [ ] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.
### Description
If you apply a transparent background overlay to a container with a video background w/ fallback image, the opacity is applied 2x to the fallback image. Once the video loads, the opacity is correct, but this leads to a jarring transition from fallback image to video, where the image is much darker than the video that loads a few moments later. I found one reference to this, but I don't believe a ticket has been opened: https://github.com/elementor/elementor/issues/1644#issuecomment-1972020312
### Steps to reproduce
1. Add a container
2. Give that container a video background (I'm using a Vimeo video)
3. Give that container a background overlay that is black with .4 opacity
4. Save and view the page
You'll see that the fallback image is much darker than the video once it loads.
### Expected behavior
Fallback image and video should have the same background-overlay opacity.
### Isolating the problem
- [ ] 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: nginx
MySQL version: Percona Server (GPL), Release '28', Revision '47601f19'$ v8.0.36-28
PHP Version: 8.2.19
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.5.3
Site URL:
Home URL:
WP Multisite: No
Max Upload Size: 50 MB
Memory limit: 40M
Max Memory limit: 512M
Permalink Structure: /%postname%/
Language: en_US
Timezone: America/New_York
Debug Mode: Inactive
== Theme ==
Name:
Version: 1.0.0
Author:
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 3.0.0
Parent Theme Author: Elementor Team
== User ==
Role: administrator
WP Profile lang: en-US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
== Active Plugins ==
Advanced Custom Fields PRO
Version: 6.2.4
Author: WP Engine
Classic Editor
Version: 1.6.3
Author: WordPress Contributors
Duplicate Page
Version: 4.5.3
Author: mndpsingh287
Elementor
Version: 3.21.8
Author: Elementor.com
Elementor Pro
Version: 3.21.3
Author: Elementor.com
Export All URLs
Version: 4.7
Author: Atlas Gondal
FacetWP
Version: 4.3
Author: FacetWP, LLC
FacetWP - Elementor
Version: 1.9
Author: FacetWP, LLC
Search & Filter
Version: 1.2.16
Author: Code Amp
SVG Support
Version: 2.5.5
Author: Benbodhi
Yoast SEO
Version: 22.8
Author: Team Yoast
== Must-Use Plugins ==
Force Strong Passwords - WPE Edition
Version: 1.8.0
Author: Jason Cosper
WP Engine Cache Plugin
Version: 1.3.0
Author: WP Engine
WP Engine Seamless Login Plugin
Version: 1.6.1
Author: WP Engine
WP Engine Security Auditor
Version: 1.1.1
Author: wpengine
WP Engine System
Version: 5.0.1
Author: WP Engine
== Features ==
Custom Fonts: 0
Custom Icons: 0
== Integrations ==
== Elementor Experiments ==
Improved Asset Loading: Active by default
Improved CSS Loading: Active by default
Inline Font Icons: Inactive
Additional Custom Breakpoints: Active by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active by default
Upgrade Swiper Library: Active by default
Grid Container: Active
Nested Elements Performance: Inactive by default
Optimized Control Loading: Inactive
Default to New Theme Builder: Inactive
Hello Theme Header & Footer: Inactive
Elementor Home Screen: Active by default
Editor Top Bar: Active
Build with AI: Inactive
Landing Pages: Inactive
Nested Elements: Inactive by default
Lazy Load Background Images: Active
Pages Panel: Inactive by default
Display Conditions: Inactive by default
Form Submissions: Inactive
Menu: Inactive by default
Taxonomy Filter: Inactive by default
== Log ==
Log: showing 20 of 262024-05-20 15:52:18 [info] elementor-pro::elementor_pro_updater Started
2024-05-20 15:52:18 [info] Elementor Pro/Upgrades - _on_each_version Start
2024-05-20 15:52:18 [info] Elementor Pro/Upgrades - _on_each_version Finished
2024-05-20 15:52:18 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.21.2',
'to' => '3.21.3',
)]
2024-05-20 15:52:18 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.21.2',
'to' => '3.21.3',
)]
2024-05-20 15:52:18 [info] elementor::elementor_updater Started
2024-05-20 15:52:18 [info] Elementor/Upgrades - _on_each_version Start
2024-05-20 15:52:18 [info] Elementor/Upgrades - _on_each_version Finished
2024-05-20 15:52:18 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.21.5',
'to' => '3.21.6',
)]
2024-05-20 15:52:18 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.21.5',
'to' => '3.21.6',
)]
2024-05-22 15:52:36 [info] elementor::elementor_updater Started
2024-05-22 15:52:36 [info] Elementor/Upgrades - _on_each_version Start
2024-05-22 15:52:36 [info] Elementor/Upgrades - _on_each_version Finished
2024-05-22 15:52:36 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.21.6',
'to' => '3.21.7',
)]
2024-05-22 15:52:36 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.21.6',
'to' => '3.21.7',
)]
2024-05-27 02:13:30 [info] elementor::elementor_updater Started
2024-05-27 02:13:30 [info] Elementor/Upgrades - _on_each_version Start
2024-05-27 02:13:30 [info] Elementor/Upgrades - _on_each_version Finished
2024-05-27 02:13:30 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.21.7',
'to' => '3.21.8',
)]
2024-05-27 02:13:30 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.21.7',
'to' => '3.21.8',
)]
PHP: showing 4 of 4PHP: 2024-05-08 15:52:38 [warning X 1][../wp-content/plugins/elementor/core/files/manager.php::111] unlink(../wp-content/uploads/elementor/css/custom-pro-frontend.min.css): No such file or directory [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-05-20 15:25:03 [warning X 1][../wp-content/plugins/elementor/includes/managers/image.php::113] Trying to access array offset on value of type bool [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-05-20 16:21:50 [warning X 9][../wp-content/plugins/elementor/modules/history/revisions-manager.php::363] Undefined array key "editor_post_id" [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-05-28 13:39:02 [warning X 5][../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()
',
)]
JS: showing 12 of 12JS: 2024-05-09 18:18:49 [error X 6][../wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.21.5:3:654174] Cannot read properties of undefined (reading 'isDesignable')
JS: 2024-05-15 20:27:46 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view818") has already been destroyed and cannot be used.
JS: 2024-05-15 20:29:54 [error X 3][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view77") has already been destroyed and cannot be used.
JS: 2024-05-16 13:30:28 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view80") has already been destroyed and cannot be used.
JS: 2024-05-16 13:30:28 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view142") has already been destroyed and cannot be used.
JS: 2024-05-17 15:53:17 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view1774") has already been destroyed and cannot be used.
JS: 2024-05-17 15:53:17 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view1785") has already been destroyed and cannot be used.
JS: 2024-05-20 15:00:49 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view821") has already been destroyed and cannot be used.
JS: 2024-05-20 15:00:49 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view832") has already been destroyed and cannot be used.
JS: 2024-05-20 20:21:24 [error X 2][../wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.21.6:3:1161578] Cannot read properties of null (reading 'getBoundingClientRect')
JS: 2024-05-21 19:07:51 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view88") has already been destroyed and cannot be used.
JS: 2024-05-22 16:15:51 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view900") has already been destroyed and cannot be used.
== Elementor - Compatibility Tag ==
Elementor Pro: Compatibility not specified
FacetWP - Elementor: Compatibility not specified
== Elementor Pro - Compatibility Tag ==
````
### 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.