[Support request] Pagespeed insight complains about non supported CSS properties

modify the CSS to this:

.wpsp-overlay .wpsp-content-wrap {
    transition: none !important;
    flex: 0;
}

All the CSS flagged were on .wpsp-content-wrap element. 🙂

We can try being more list ID specific.

Example:

#wpsp-45396 .wpsp-overlay .wpsp-content-wrap {
    transition: none !important;
    flex: 0;
}

#wpsp-45396 .wp-show-posts-image.zoom img { transition: none !important;  }

But I’m a bit hesitant with the 2nd half of this css because it may break the easing of the hover animation.

You can try changing the transition to transition: transform !important; or do a double entry of the same property just to cancel out the transition: all.

Like this:

#wpsp-45396 .wpsp-overlay .wpsp-content-wrap {
    transition: none !important;
    flex: 0;
}

#wpsp-45396 .wp-show-posts-image.zoom img { transition: none;  }
#wpsp-45396 .wp-show-posts-image.zoom img { transition: transform !important;  }

I looked also into the PSI results for desktop and there it says also Unsupported CSS Property: color so this could become a never ending story. On my site, the flex shrink message seems to be an all overlay lists with zoom on hover and more than one card. Maybe the new WPSP version will solve the problem?

I don’t think the beta version will solve this because the issue is CSS-related and beta generates the same CSS as the current official release.

And the issue seems to be mostly about the interaction between WPSP’s CSS and the caching plugin you use. (since the flags don’t show up when there’s no caching plugin activated)

We can try more things though – See further suggestions here.
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

Specifically, will-change
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change