I have this same issue, I have disabled the animation using CSS by following instructions on this thread: https://kriesi.at/support/topic/disable-loading-animation-of-masonry/, but even without the animation, when scrolling over the masonry, the scrolling glitches noticeably. It seems to me that the JavaScript that animates the masonry needs some optimisation, but could you at least provide a way to completely disable the execution of the JavaScript?

Hi @Ismael,

The problem I faced is that the plugin I used called Mapplic to render a map on the home page cannot use existing pages/posts for the map pin modal content by default, so I had to duplicate the content for a page and for the map pin. This became a big issue because this content was being updated frequently and was becoming a maintenance nightmare.

So, I found a way to intercept the JavaScript event triggered when a map pin is clicked on the map, and to populate the content of the modal with the contents of an existing page. The content of that page is built using Avia Page Builder like any other page on the site, and I retrieve the content of the page using an ajax request that calls the above function in my child theme’s functions.php file. The content is therefore rendered out into the response by calling the WordPress the_content() method.

I’ve included an admin link to the page used in my specific example in the private area of this post, so you can see the avia layout. The only thing the Mapplic plugin does is fire the JavaScript event when a map pin is clicked. The rest is done by the custom code I wrote and the rendering of the content is done entirely by WordPress and Enfold. This layout issue is definitely not related to the plugin. It may be related to the way I am rendering the content in my custom code though. Maybe I can explain a bit further what I am seeing in my debugging.

When the page is requested normally as per the first link in the private area of my previous post, the first if statement evaluates to true, but then both the if statement and the else if statement below that evaluate to false, so the value of $force_close remains false. When I render the content from my custom function, calling WordPress’ the_content() method, the second if statement: if( ! isset( $meta['siblings']['next']['tag'] ) ) evaluates to true and $force_close is set to true (config-templatebuilder/avia-shortcodes/columns.php line 756 – 769). This is where the layout goes wrong, and each column is wrapped in a div.flex_column_table.av-equal-height-column-flextable element instead of the 2 columns (in my case) in the row being wrapped in this element, as represented in the avia advanced layout builder:

                               /**
				 * check if row will break into next column 
				 */
				if( ( false === $force_close ) && ! empty( avia_sc_columns::$first_atts['min_height'] ) && ( 'av-equal-height-column' ==  avia_sc_columns::$first_atts['min_height'] ) )
				{
					if( ! isset( $meta['siblings']['next']['tag'] ) )
					{
						$force_close = true;
					}
					else if( ( avia_sc_columns::$calculated_size + avia_sc_columns::$size_array[ $meta['siblings']['next']['tag'] ] ) > 1.0 )
					{
						$force_close = true;
					}
				}

I have created a temporary workaround by overriding the above file and adding an extra condition: !(defined('DOING_AJAX') && DOING_AJAX) to the first if statement, to prevent the subsequent if (...) { ... } else if { ... } block from being executed at all. I just wondered if someone there could explain why $meta['siblings']['next']['tag'] is not set when rendering the content this way?

Thanks again,
Gareth