eduardovillao / speed-up-elementor Goto Github PK

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