Flip card does not look correct sometimes

Occasionally (I would say about every 3 page loads) 1 or 2 of the flip cards will not display properly, it seems like the background color is not expanding to the entire height. Usually when I see this problem a simple reload of the site fixes it, but if I try a shift+reload it will occasionally show the issue again. Screenshot: http://calebbyers.com/img1107.jpg See it for yourself at: http://2021.airfieldmats.com Use password “ams2021” to view site. The flip cards are the first thing below the header. If you do not see it at first hold shift and reload a few times until it happens. Any idea why this is happening? do you know a way to fix? Many thanks. This topic was modified 5 years ago by caleb1 . Hi, I think the issue is related to lazy loading of images. Can you deactivate any lazy loading plugins and disable lazy loading of images in WordPress. https://wordpress.org/plugins/disable-lazy-loading/ I will try to fix it in an update soon. Hello, I have a similar issue here. May I know when the next update is going to be released? Many thanks, Richard If I may add something. I have disabled lazy loading by adding the following code to the theme’s functions.php: add_filter( 'wp_lazy_loading_enabled', '__return_false' ); I can confirm, in the browser inspector, the images are not lazy loading and the issue persists. I wish there was an option to add attachments here, so that I could include some screenshots. Cheers, Richard Hi, Can you add a new code module at the bottom of the page after all the flip cards. Then add the following code inside the code module. <script> $(".lwp_divi_flipbox img").each(function(){ $(this).on('load', function() { //console.log($(this).attr('src')); let $flip_box_front = $(this).parents(".flip_box_front"); $flip_box_front.height('auto'); let $front_height = $flip_box_front.height(); let $flip_box_back = $(this).parents(".flip_box_back"); $flip_box_back.height('auto'); let $back_height = $flip_box_back.height(); let $front_outer_height = $flip_box_front.outerHeight(); let $back_outer_height = $flip_box_back.outerHeight(); if ($front_height > $back_height) { $(this).parents(".flip_box").height($front_outer_height); $flip_box_back.height($front_height); $flip_box_front.height($front_height); } else { $(this).parents(".flip_box").height($back_outer_height); $flip_box_back.height($back_height); $flip_box_front.height($back_height); } }); }); }); </script> I will release an update next week. This reply was modified 4 years, 11 months ago by learnhowwp . Hi, Thanks for the code. It seems to be only working on localhost. For some reason, it doesn’t work on the live site. Cheers, Richard Could you share a link. Sure, it’s 2 of them: https://www.aurumexploration.com/aurum-exploration-team https://www.aurumexploration.com/geological-services But the issue can only be seen after clearing the website’s cache. I have just done that. The code is not present on the page. It will only work if you add it in a code module on the page after all the flip cards module. http://prntscr.com/1484df8 Yes, I know. I removed it because it had not worked. I’m going to add it again to https://www.aurumexploration.com/aurum-exploration-team page and will get back to you as soon it’s in place. The code is in now. Please see https://www.aurumexploration.com/aurum-exploration-team . I am sorry I made a mistake in the code while copy pasting. Please try this code instead. <script> jQuery(function($) { $(".lwp_divi_flipbox img").each(function(){ $(this).on('load', function() { //console.log($(this).attr('src')); let $flip_box_front = $(this).parents(".flip_box_front"); $flip_box_front.height('auto'); let $front_height = $flip_box_front.height(); let $flip_box_back = $(this).parents(".flip_box_back"); $flip_box_back.height('auto'); let $back_height = $flip_box_back.height(); let $front_outer_height = $flip_box_front.outerHeight(); let $back_outer_height = $flip_box_back.outerHeight(); if ($front_height > $back_height) { $(this).parents(".flip_box").height($front_outer_height); $flip_box_back.height($front_height); $flip_box_front.height($front_height); } else { $(this).parents(".flip_box").height($back_outer_height); $flip_box_back.height($back_height); $flip_box_front.height($back_height); } }); }); }); </script> I have changed the code and it seems to be working only in Chrome, but not always. Could you delete the code and try this code at its place. <script> jQuery(function($) { function resizeFlipCards() { $('.flip_box').each(function() { let $flip_box_front = $(this).find(".flip_box_front"); $flip_box_front.height('auto'); let $front_height = $flip_box_front.height(); let $flip_box_back = $(this).find(".flip_box_back"); $flip_box_back.height('auto'); let $back_height = $flip_box_back.height(); let $front_outer_height = $flip_box_front.outerHeight(); let $back_outer_height = $flip_box_back.outerHeight(); if ($front_height > $back_height) { $(this).height($front_outer_height); $flip_box_back.height($front_height); $flip_box_front.height($front_height); } else { $(this).height($back_outer_height); $flip_box_back.height($back_height); $flip_box_front.height($back_height); } }); } $(window).on("load", resizeFlipCards()); }); </script> This reply was modified 4 years, 11 months ago by learnhowwp . Just tried the new code but it’s still the same. It works directly in the browser. I see you are using a caching plugin. Can you check after deactivating it. I disabled the WP Fastest Cache plugin but it didn’t help. When you visit the page for the first time, the issue is there. It’s gone when you refresh the page. I just released an update for the plugin. Please update the plugin to the latest version. It should be fixed in the update. Hi, I have rebuilt the flip cards manually on the homepage and the services page. However, I have updated the plugin and have tested the team page and the flip cards seem to be appearing as expected now. Thanks very much for your hard work and time put into this – very much appreciated. Cheers, Richard You are welcome. I will appreciate it if you can leave a review for the plugin. Will do very shortly. Thanks again for all your time and help. Best regards, Richard