[Support request] Category description need a refresh to load correctly

[Enrico]

Hi Tom,
I have installed GP 2.0 to see if a problem was solved in this new version.

For the moment, I don’t see any new problem or difference with GeneratePress 2.0-alpha.1

I need to update also GP premium plugin to see some differences?

I have a problem of alignment in category pages only on iPads. It started with Gp Premium 1.5.x and is not solved with GP 2.0.

As you can see, the first time you enter on the category pages with an iPad, the category description goes under the masonry. If I do a refresh of the page the problem disappear.

On iPad I tested with Chrome and FireFox (they are Updated to the latest versions) and on Safari, the problem is the same with all the browser.

I tried to disable autoptimize and other plugins and the problem was not solved.

Workaround:

If I don’t use the masonry there is no problem. If I don’t insert an image in the category description the problem disappear.

Since I prefer to use masonry and I need to insert an image in the category description, I have the problem.

I could do an other workaround, stop using the category descriptions and use only the page headers, but I am not sure that the SEO will be good (hatom, hcard,schema.org, etc.) with empty category descriptions.

[Tom]

Strange, this looks like a GPP 1.5 bug.

How are you adding the HTML into the category description? Using a plugin?

[Enrico]

Yes, I have seen it on 1.5

I insert only the image centered, the headings h1, h2 and an author fn at the end.

Very simple, I use this category description since 2015. I never used a plugin for category.

The source of the problem are the images in the descriptions, your masonry don’t like them 🙂

If I remove the images it is everything ok.

[Tom]

Strange, I don’t think it’s supposed to accept HTML: https://www.screencast.com/t/BOFiFABz

I’ll find a plugin that allows it and will do some testing 🙂

[Tom]

Can you try adding this into the wp_footer hook?:

<script>
    jQuery( document ).ready( function( $ ) {
        var $grid = $( '.masonry-container' );
        if ( $grid.length ) {
            $grid.imagesLoaded( function() {
                $grid.masonry( 'layout' );
            } );
        }
    } );
</script>

[Enrico]

Wow, your code fixed the problem! Thanks a lot!

But doing some tests I discovered that I can not use that code, it create at least one other problem. The side menu work only on the home page with your code in the wp-footer.

I also discovered that it is Yoast Seo that let me edit category in visual mode 🙂 I use Yoast from day 0 with WordPress, so for me images in category was a standard of WordPress.

I am sure that other sites have this problem too on iPad, Yoast is almost a standard for WordPress.

[Tom]

The slideout menu doesn’t work only when that code is added? On iPad only, or desktop as well?

[Enrico]

I retested you code now.
The slide-out menu, with the code in the wp-footer, is working only in the home page and sub menu (category page). On the other pages and posts was doing only a scroll down of the page.

I tested it on desktop and on iPad same problem.

[Tom]

Can you try the updated code above?

[Enrico]

I made an extensive test. Now the slide out menu is working every where.

The first loads of the category page is always perfect now.

Only on iPad with Chrome, if I reload the page, the second time it make some unwanted space between the description and the masonry of posts. With Firefox Quantum on iPad is always perfect like in the desktop-

I cleaned all the cache including browser to be sure.

I am using the old GP 2.0 alpha and I have not flagged execute php in the wp_footer hook.

[Enrico]

I made the same tests with GP 2.0 beta 1 and WordPress 4.9.1 and I confirm that there is a little problem only on iPad with Chrome on the second load of the category page.

For me it is not a problem, is 3 or 4 cm space on second load, normally no one reload the pages. I do it to test it better.

[Tom]

Very strange indeed – I’ll look into it some more.

[Author]

Posts