No, sadly it doesn’t. I’ve stripped out all CSS related to WPSP on the dev site here: https://jaijiel.net/testsites/knock2020/ and the issue remains when comparing between Firefox and Chrome/Safari. The dev site is a little different to the live site (where I re-made the home page without Elementor) in terms of WPSP settings – image overlay colour, gutter size etc. – but it’s effectively the same layout.
Also I’m using CSS to control the column count on the live site, with each grid set to 2 columns then changed via CSS at various breakpoints. Without the CSS on the dev site I’ve changed the column count from 2 to 3 to better replicate the live site layout.
On both sites the image size is set to 740x471px for consistency. Some of the featured images used in the lower grid (under the video) are wide and shallow – they’re used in the shallow hero background images on the respective pages and I want to try and keep the featured image size as small as possible – and a few are deeper as they’re not used in the page heroes, so if I remove the image sizes from WPSP the lower grid becomes a mix of shallow and deeper images which is not ideal.
I’ve just found that changing this helps:
.wpsp-overlay .wp-show-posts-image, .wpsp-overlay .wp-show-posts-image img {
height: calc(100% + 1em);
}
If the height is changed to auto then it works as intended in Chrome too. However, Safari is then clipping the meta at the bottom of the News (top) grid items… At a push I could live with just changing the image height to auto for the lower grid and make do with the News being a little strange in some browsers but it would be good to get to the root of this.