dannygrio commented 4 years ago

12186 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

My hero section was working fine with a top shape divider and a section with content above it. Today I noticed that the shape divider, is now above my content. I checked Z-index of section and is (0). I tried to add a high number to see if this was the fix. In addition, under shape divider option, I made sure that Bring to front is off or (no). Even though this problem came up without me editing the website. I have no idea what happened, but I believe its because of the new elementor 3.0. update. To try and fix the problem I have updated to 3.3 Elementor Pro and 3.0.5 Elementor, but no success. Furthermore, I have the following plugins: Wordfence security and Form Masks for elementor. The theme I use is Hello and this is all I have. As I said I didnt edit anything on the website and the shape divider was working fine. All of a sudden now the wave shape is above the content of the hero image. Moreover, I use dividers in other sections of the page and nothing has changed and they are working fine as when I created it. I have checked for updates and also regenerated CSS and Sync Files under tools. Nothing works.

Steps to reproduce

Hello Theme
create a Hero section with two columns
add content
Shape Divider
Use top / waves
Width 245
height 462
flip: on
Invert: 0n
bring to front off

Isolating the problem

[x] This bug happens with only Elementor plugin active (and Elementor Pro).
[x] This bug happens with a default WordPress theme active.
[x] I can reproduce this bug consistently using the steps above.

Environment

System Info

``` == Server Environment == Operating System: Linux Software: Apache MySQL version: Percona Server (GPL), Release 84.1, Revision b308619 v5.6.41-84.1 PHP Version: 7.4.9 PHP Max Input Vars: 1000 PHP Max Post Size: 260M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 5.5.1 Site URL: https://grupoindexx.com.br Home URL: https://grupoindexx.com.br WP Multisite: No Max Upload Size: 256 MB Memory limit: 256M Permalink Structure: /%postname%/ Language: en-US Timezone: America/Sao_Paulo Debug Mode: Inactive == Theme == Name: Hello Elementor Version: 2.3.0 Author: Elementor Team Child Theme: No == User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 == Active Plugins == Elementor Version: 3.0.5 Author: Elementor.com Elementor Pro Version: 3.0.3 Author: Elementor.com Form Masks for Elementor Version: 1.3 Author: EduardoVillao.me Wordfence Security Version: 7.4.11 Author: Wordfence == Elements Usage == page : 1 image : 1 popup : 2 divider : 1 heading : 2 image : 1 section : 2 button : 1 heading : 1 wp-page : 3 button : 2 form : 2 heading : 4 html : 2 icon-list : 6 image : 5 text-editor : 6 == Log == JS: showing 10 of 10JS: 2020-08-07 21:30:37 [error X 1][https://grupoindexx.com.br/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view8644\") has already been destroyed and cannot be used. JS: 2020-08-07 23:42:46 [error X 23][https://grupoindexx.com.br/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=2.10.3:2:106280] Cannot read property \'match\' of undefined JS: 2020-08-08 04:28:00 [error X 8][https://grupoindexx.com.br/wp-admin/post.php?post=8&action=elementor#:7:24] missing ) after argument list JS: 2020-08-08 04:28:04 [error X 5][https://grupoindexx.com.br/wp-admin/post.php?post=8&action=elementor#:7:3] Invalid or unexpected token JS: 2020-08-08 05:03:29 [error X 3][undefined:54:30] $(\"#form-field-celular\").mask is not a function. (In \'$(\"#form-field-celular\").mask(\"(99) 99999-9999\")\', \'$(\"#form-field-celular\").mask\' is undefined) JS: 2020-08-08 23:04:52 [error X 1][https://grupoindexx.com.br/wp-admin/post.php?post=8&action=elementor#:30:37] Unexpected token \')\' JS: 2020-08-09 02:10:12 [error X 75][https://grupoindexx.com.br/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=2.9.14:2:65602] e.elementorWaypoint is not a function JS: 2020-08-10 17:55:43 [error X 81][https://grupoindexx.com.br/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=2.9.14:2:65619] undefined is not a function (near \'...e.elementorWaypoint...\') JS: 2020-09-01 14:13:52 [error X 3][https://grupoindexx.com.br/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.0.1:2:143101] undefined is not an object (evaluating \'this.elements.$submitButton.attr(\"class\").match\') JS: 2020-09-02 15:47:25 [error X 11][https://grupoindexx.com.br/wp-content/plugins/elementor/assets/lib/pickr/pickr.min.js?ver=1.5.0:2:19667] null is not an object (evaluating \'this.getColorRepresentation().toLowerCase\') PHP: showing 1 of 1PHP: 2020-08-08 14:17:27 [notice X 4][/home2/grupoi46/public_html/wp-content/plugins/elementor-pro/modules/forms/actions/mailchimp.php::211] Undefined index: email_address [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] Log: showing 20 of 222020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_general_settings_to_kit Start 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_general_settings_to_kit Finished 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_default_colors_to_kit Start 2020-08-28 16:38:41 [notice] System colors are disabled. nothing to do. 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_default_colors_to_kit Finished 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_saved_colors_to_kit Start 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_saved_colors_to_kit Finished 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_default_typography_to_kit Start 2020-08-28 16:38:41 [notice] System typography is disabled. nothing to do. 2020-08-28 16:38:41 [info] Elementor/Upgrades - _v_3_0_0_move_default_typography_to_kit Finished 2020-08-28 16:38:41 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.14', 'to' => '3.0.3', )] 2020-08-28 16:39:23 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.10.3', 'to' => '3.0.1', )] 2020-08-30 23:16:29 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.0.3', 'to' => '3.0.4', )] 2020-08-31 17:23:33 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.0.4', 'to' => '3.0.5', )] 2020-08-31 17:23:33 [info] elementor::elementor_updater Started 2020-08-31 17:23:33 [info] Elementor/Upgrades - _v_3_0_5_re_move_space_between_widgets_to_kit Start 2020-08-31 17:23:33 [info] Elementor/Upgrades - _v_3_0_5_re_move_space_between_widgets_to_kit Finished 2020-08-31 17:23:33 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.0.4', 'to' => '3.0.5', )] 2020-09-01 11:18:50 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.0.1', 'to' => '3.0.2', )] 2020-09-02 17:30:13 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.0.2', 'to' => '3.0.3', )] ```

patche81 commented 4 years ago

You are not alone, we also experience this bug since upgrading to 3.0.x ...

dannygrio commented 4 years ago

You are not alone, we also experience this bug since upgrading to 3.0.x ...

Any news from elementor regarding this problem? At least now I know this issue is a bug!

patche81 commented 4 years ago

Any news from elementor regarding this problem? At least now I know this issue is a bug!

nothing so far, our website is broken at the moment we are losing sales...

creakipik commented 4 years ago

Hello, It's not an Elementor update issue. We have the same on 3.0 and 2.9. The problem is only on Chrome v85 from the 25 august. FF Chrome 84 Safari stay working well. @shilo-ey the transform css of the flip option make the issue... I don't really know maybe a z-index context. But i don't know how to fix it quickly with css. "{{WRAPPER}} > .elementor-shape-$side svg" => 'transform: translateX(-50%) rotateY(180deg)', Seems the cumulation of this 2 transforms. Regards

wesleygoldsborough commented 4 years ago

Yep just had this issue on my site. It seems to only happen on the latest chrome version with shape dividers where the "Flip" setting is toggled on. I was able to fix this problem by adding this css rule globally.

.elementor-shape-bottom svg, .elementor-shape-top svg { z-index: -1; }

dannygrio commented 4 years ago

Yep just had this issue on my site. It seems to only happen on the latest chrome version with shape dividers where the "Flip" setting is toggled on. I was able to fix this problem by adding this css rule globally.

.elementor-shape-bottom svg { z-index: -1; }

hey @wesleygoldsborough thank you for this solution! worked like a charm and I just changed shape-bottom with shape-top.

I'll wait for future updates so I can remove this extra css from the website.

Once again, thank you!

Elementor, never even replied to my support ticket! I am really thinking of switching to Oxygen! This update they released was a total failure and lots of people with clients complaining their site is broken.

thanks!!

wesleygoldsborough commented 4 years ago

No prob @dannygrio glad it worked for you.

patche81 commented 4 years ago

@wesleygoldsborough the fix that you provided introduce others bugs in our website.

Elementor we need an "official" fix ASAP for this !

dannygrio commented 4 years ago

@wesleygoldsborough the fix that you provided introduce others bugs in our website.

Elementor we need an "official" fix ASAP for this !

@patche81 I placed the code in the section and not global. Have you tried that?

Iconicdigitalw commented 4 years ago

Yep just had this issue on my site. It seems to only happen on the latest chrome version with shape dividers where the "Flip" setting is toggled on. I was able to fix this problem by adding this css rule globally.

.elementor-shape-bottom svg { z-index: -1; }

Seems to fix the issue at the moment

shilo-ey commented 4 years ago

@patche81 commented on Sep 4, 2020, 11:06 PM GMT+3:

@wesleygoldsborough the fix that you provided introduce others bugs in our website.

Elementor we need an "official" fix ASAP for this !

Can you please share which issues it caused in your site?

patche81 commented 4 years ago

@shilo-ey We use triangle and tilt dividers. Only the tilt dividers seem to have an issue. Their z-index is broken in some instances and they overlap any elements that should instead overlap them. When applying the CSS suggested above to our global CSS, triangle shape dividers disappear completely, but most of the tilt dividers are fixed.

patche81 commented 4 years ago

Any update regarding this ?

dannygrio commented 4 years ago

@patche81 I am wondering the same thing. I asked for support and never heard back from elementor! I wrote here and also no answer!

browninaz commented 4 years ago

Gotta love tech!

sugarchrist commented 4 years ago

thank you for this solution! @wesleygoldsborough, it work well for me

JeroenvanderPoll commented 4 years ago

Yep just had this issue on my site. It seems to only happen on the latest chrome version with shape dividers where the "Flip" setting is toggled on. I was able to fix this problem by adding this css rule globally.

.elementor-shape-bottom svg { z-index: -1; }

you are a life-saver!

patche81 commented 4 years ago

Is there anyone reading this ?

JeroenvanderPoll commented 4 years ago

Elementor is aware, they guided me to this thread to fix the issue.

shilo-ey commented 4 years ago

This issue has been resolved in Elementor v3.0.8. Please note that this issue is caused by Chrome v85, and if they will address this issue, we will remove this temp fix.

Feel free to update

Thanks!

shilo-ey commented 4 years ago

This fix caused shape dividers to disappear in some cases. Issue reopened.

dannygrio commented 4 years ago

thank you @shilo-ey for the comments!

dannygrio commented 4 years ago

This fix caused shape dividers to disappear in some cases. Issue reopened.

@shilo-ey in my case, I have updated to version 3.0.8.1 and removed the CSS fix related above. Nevertheless, the problem still exists and I am also noticing that the first section on elementor is hard to select, as it desapegara when you move your cursor. This elementor 3.0 is the worst I've seen!!

fully-functional commented 4 years ago

following because of disappearing dividers...

cirkut commented 4 years ago

FWIW, it appears that there's a bug in Chromium 85 that causes an overlap because of a regression in some type of testing. I have no idea of the root cause, but ultimately, this isn't anything that Elementor can really fix, because placing the shape dividers underneath with z-index: -1 can cause a lot of issues, especially with background overlays.

See on the Chromium Bug Tracker.

I'm hoping they address this issue in a future Chromium version, but we'll all need to apply the fix provided by @Iconicdigitalw on a case-by-case basis to fix this until Chromium is updated to fix this paint issue.

pako69 commented 4 years ago

Hi

The 3.0.8.1 version say: "Fix: Reverted Shape Dividers are in front other elements in Chrome 85 fix due to display glitches". > But this version do not fixed anything... when the option FLIP is ON !

I'm using this fixe: .elementor-shape.elementor-shape-bottom {overflow: inherit;}

cirkut commented 4 years ago

@pako69 That is correct. 3.0.8.1 reverts their original fix for the overlap (adding z-index: -1 to the shape divider), because it causes issues on other sites as well. So the 'fix' listed in 3.0.8.1's patch notes is that they are fixing (removing) their incorrect fix of the actual issue, which at this point I don't think is anything that Elementor can realistically solve (as sad as that may seem). This is just an issue with Chrome incorrectly calculating z-index when painting the page.

keslleynetto commented 4 years ago

The issue is fixed only in desktop. In mobile the issue still remains.

patche81 commented 4 years ago

wow the "google bug" is dating from 2015... is there any hope for an elementor fix/workaround regarding this !?

cirkut commented 4 years ago

@patche81 The bug from 2015 is actually reopened. It was an issue that was solved, but now that Chrome 85 has been released, there seems to have been a regression that caused the same/similar issue.

I've actually had good luck with the fix from @pako69 to put the shape dividers in their appropriate z-index level.

simonclay commented 4 years ago

I am also experiencing this issue when the shape divider is flipped.

@pako69 thank you. Fix is working for me at the moment.

mcrowell commented 4 years ago

+1 - The fix ".elementor-shape.elementor-shape-bottom {overflow: inherit;}" works good, but I noticed it adds additional spacing on the right causing the horizontal scroll bar to appear in the browser.

absolutseppi commented 4 years ago

+1 - The fix ".elementor-shape.elementor-shape-bottom {overflow: inherit;}" works good, but I noticed it adds additional spacing on the right causing the horizontal scroll bar to appear in the browser.

Same here. It seems though that the horizontal scroll bar issue only appears in Safari on desktop, but shows in all browsers on mobile that I have tested on iOS and Android devices – Safari, Chrome, Firefox, and Edge.

Unfortunatley, I cannot use "overflow > hidden" as I need some of the elements to "overflow". But it doesn't seem to fix that issue anyway.

creakipik commented 4 years ago

In fact .elementor-shape.elementor-shape-bottom {overflow: inherit;} and .elementor-shape-bottom svg { z-index: -1; } are just temporary fix. @shilo-ey Elementor team needs to work on a new way to integrate the shape divider feature. For ex. Oxygen shape divider integration doesn't have this issue. Can we have the roadmap on this please ?

pako69 commented 4 years ago

Try this below: .elementor-shape.elementor-shape-bottom {overflow-x: auto;} instead of my first fix: .elementor-shape.elementor-shape-bottom {overflow: inherit;}

Will solved this issue on Chrome Desktop without extra right space on Desktop Safari. Test ok on IOS (Both Safari and Chrome) I don't have an Android mobile to test...

absolutseppi commented 4 years ago

@pako69 Thanks a lot for the new approach! It almost did the trick. It really fixed it on iOS, but it added a "fixed" horizontal scrollbar on Desktop in Safari on Mac. That scrollbar is always visible, but does't do anything. You cannot even move it. Very strange and frustrating ... Thanks for trying, though.

pako69 commented 4 years ago

@pako69 Thanks a lot for the new approach! It almost did the trick. It really fixed it on iOS, but it added a "fixed" horizontal scrollbar on Desktop in Safari on Mac. That scrollbar is always visible, but does't do anything. You cannot even move it. Very strange and frustrating ... Thanks for trying, though.

Hi @absolutseppi I do not have the horizontal scrollbar you are talking about... :

Shape divider

pako69 commented 4 years ago

In fact .elementor-shape.elementor-shape-bottom {overflow: inherit;} and .elementor-shape-bottom svg { z-index: -1; } are just temporary fix. @shilo-ey Elementor team needs to work on a new way to integrate the shape divider feature. For ex. Oxygen shape divider integration doesn't have this issue. Can we have the roadmap on this please ?

+1 !

absolutseppi commented 4 years ago

@pako69 Strange. I use Safari Version 14.0 (15610.1.28.1.9, 15610)

pako69 commented 4 years ago

@pako69 Strange. I use Safari Version 14.0 (15610.1.28.1.9, 15610)

Mine is Version 14.0 (14610.1.28.1.9) But I don't think it make a lot difference, can you share me an URL please? And there your version is not available to me... (But are you using Safari on a Mac or on PC?)

absolutseppi commented 4 years ago

@pako69 Strange. I use Safari Version 14.0 (15610.1.28.1.9, 15610)

Mine is Version 14.0 (14610.1.28.1.9) But I don't think it make a lot difference, can you share me an URL please? And there your version is not available to me... (But are you using Safari on a Mac or on PC?)

On a Mac. You can have a look at the staging version here: https://www.staging2.alatas.com/ user: github pwd: 1_4_Preview

Thx for all the effort you put into this! Really appreciate it!

pako69 commented 4 years ago

@pako69 Strange. I use Safari Version 14.0 (15610.1.28.1.9, 15610)

Mine is Version 14.0 (14610.1.28.1.9) But I don't think it make a lot difference, can you share me an URL please? And there your version is not available to me... (But are you using Safari on a Mac or on PC?)

On a Mac. You can have a look at the staging version here: https://www.staging2.alatas.com/ user: github pwd: 1_4_Preview

Thx for all the effort you put into this! Really appreciate it!

Your are still using my old fix: .elementor-shape.elementor-shape-bottom { overflow: inherit; } Or you don't have clear your cache plugin.

BTW even if I live-edit your CSS with Safari Inspector and use my new fix, I do not have any horizontal scrollbar, here is:

alatas

absolutseppi commented 4 years ago

@pako69 Strange. The cache was cleared and the new fix was applied. Anyway. I have double checked and I still see the scroll bar. Mysterious ...

pako69 commented 4 years ago

@pako69 Strange. The cache was cleared and the new fix was applied. Anyway. I have double checked and I still see the scroll bar. Mysterious ...

Hi, on Mac there wasn't issue with my fix but it do not work on PC! Try this: .elementor-shape.elementor-shape-bottom {overflow-x: inherit;}

shilo-ey commented 4 years ago

Hey,

Please try using the following CSS and let me know if it solves the issue for you in all of the cases (Invert, Top, Bottom and Flip) and in various browsers:

.elementor-shape.elementor-shape-bottom:not([data-negative="true"]) svg, .elementor-shape.elementor-shape-top:not([data-negative="false"]) svg {
    z-index: -1;
}

Thanks

pako69 commented 4 years ago

.elementor-shape.elementor-shape-bottom:not([data-negative="true"]) svg, .elementor-shape.elementor-shape-top:not([data-negative="false"]) svg {
    z-index: -1;
}

Yes, IT WORKS ! Soon released? 👍 thanks

debihazelden commented 4 years ago

I have the same issue too

shilo-ey commented 4 years ago

This issue has been resolved in Elementor v3.0.12

Feel free to update

Note that this fix is temporary because Chrome released a version that fixes most of the occurrences.

Thanks!

elementor / elementor

Shape divider above content after updating Elementor. #12393

12186 Prerequisites

Description

Steps to reproduce

Isolating the problem

Environment