Skip to content

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

@momo-fr

Description

@momo-fr

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions