Unwanted behavior on certain elements [Facet WP]

[robertobze]

hey devs, @timmse

I wanted to bring up the following: I am using FacetWP for filtering on a client site. I have used this in Oxygen before and I don’t have this small issue with it.

When a facet has not been selected, FacetWP’s “reset” button should be hidden by default. They have the correct CSS loaded for that.

However, I guess to how Bricks’ applies it’s styles, it’s setting a display block 100% css rule on buttons to that reset element which is a “button”.

see below screenshots:

if I remove the display css from the button element class Bricks loads, it works/displays as intended:

For now, I hacked it using the !important rule. Just wondering if this is needed on Bricks button default styling?

thanks!

[robertobze]

@timmse here is another one with FacetWP:

when a facet is selected and FacetWP reloads with the filter added, images break. See screenshots below:

regular without facet selected displays correctly:

with facet selected and reload, it removes image competely:

this is mentioned on FacetWP’s website;

is there any possibility to enhance the compatibility with lazy loading images using FacetWP facets?

thanks

[cmstew]

Hey Roberto,

I can’t speak to the first issue but the lazy loading image issue is a pretty common one. Happens with Search & Filter Pro too.

You need to follow the instructions and put something like this in your child theme’s functions.php file.

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
    bricksLazyLoad();
});
</script>
<?php
}, 100 );

This should work with Bricks.

[robertobze]

thanks very much for this,

I tried it, however it doesn’t work unfortunately…

what I am observing is that the image issue on facet reload is happening in Safari only. Firefox and chrome works fine…