Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First loop does not load a dynamic ACF mask correctly #1

Open
momo-fr opened this issue May 31, 2024 · 0 comments
Open

First loop does not load a dynamic ACF mask correctly #1

momo-fr opened this issue May 31, 2024 · 0 comments

Comments

@momo-fr
Copy link

momo-fr commented May 31, 2024

I encounter a problem with loop widgets (Grid or Carousel).
In my loop I use the CTA widget with a global mask on the widget, this mask comes from an image loaded from an ACF field.
The first loop does not display correctly, the following ones without problem.
Looking at the code I see that the CSS rule of the mask, on the first loop, is overwritten by a generic mask rule:
.elementor-2341 .elementor-element.elementor-element-f4b3b26:not(.elementor-widget-image) .elementor-widget-container {
-webkit-mask-image: url(http://gizyors.cluster023.hosting.ovh.net/wp-content/plugins/elementor/assets//mask-shapes/custom.svg);
-webkit-mask-size: contain;
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
}

While my CSS rule is loaded BEFORE:
.e-loop-item-29 .elementor-element.elementor-element-f4b3b26:not(.elementor-widget-image) .elementor-widget-container {
-webkit-mask-image: url(http://gizyors.cluster023.hosting.ovh.net/wp-content/uploads/2024/05/logo-blomus-detour.svg);
}

On the following loops the order of the rules is reversed and the mask is clearly displayed.

I made a video to show the problem here: https://go.screenpal.com/watch/cZhtQwVLsVx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant