elementor / elementor/elementor

🐞 Background overlay applies 2x to video background fallback images

Open
#27,548 2 comments 0 reactions 0 assignees View on GitHub
bug component/video control/group/background element/container mod* mod/v* product/pro
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.