- This topic has 19 replies, 2 voices, and was last updated 2 years, 2 months ago by
.
-
Posts
-
Hello,
looking into pagespeed insight in the section Avoid non-composited animations I see a lot of unsupported CSS property messages.Is there a need for action on this or is it of no significance?
Hi Bernhard,
That’s strange.
Can you try disabling ALL plugins except WPSP and WPSP Pro and run it on Google PSI and see if the ” Avoid non-composited animations ” still show up?
it disappears when WP Rocket is disabled.
It’s possible that WP Rocket’s merging/aggregating of CSS breaks something and causes that.
consider excluding CSS coming from
/wp-content/plugins/wp-show-postsand/wp-content/plugins/wp-show-posts-profrom CSS aggregation/merge.Ok, for now the problem with WPSP is solved excluding the 4 css files.
Please note that the problem is only with the overlay cards. Base and polaroid cards have not this problem. I know that there will be a major release of WPSP. Probably you can check what happens.
Now I have still the same problem with Generateblocks buttons.
Now I have still the same problem with Generateblocks buttons.
Can you open this issue on GenerateBlocks forums? David and/or Leo is more familiar w/ GB-related issues. Perhaps they’ve already encountered this and already got a workaround for this. 🙂
OK, the GB Button problem has been solved.
I rechecked and found, that the problem still appears randomly with WPSP, even since the css files are excluded. Checking different posts and pages, it reappears sometimes. Checking the same page more times, it may happen that the first view is ok and the problem appears with the second view or viceversa. Screenshot
Hello,
I checked today again and the problem of the non composited animations is still there. So it’s not a cache problem. Is there a way to solve it?Hi there,
I’ve tested overlay, overlay 1 and overlay 2 on Google PSI just to be sure it doesn’t have that issue by itself and it actually didn’t get any flags for non-composite animation.
That said, do you have any custom CSS used on your WPSP list? Can you try disabling CSS merge and Critical CSS (if you have it on)?
Hi Elvin,
these are my CSS settings in WP Rocket screenshotI have the following CSS for WPSP:
.entry-content .wp-show-posts-entry-title { min-height: unset; } .entry-content .wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) { margin-bottom: 0.5em; } @media(max-width:768px){ section#wpsp-37158 { margin-bottom: 0.5em; } }These are the image settings of the overlay cards screenshot
Can you try doing process of elimination which works best?
I’d start with disabling CSS merge and check if its still the case.
Test the page every time you disable something and see if the flag doesn’t show up. 😀
Do you mean “combine CSS”? I did but it makes no difference.
The problem is also that the error appears randomly. When I disabled image zoom on hover, probably it disappeared. At least, when I tested more times the error did not reappear.For the GB buttons, 3 lines of css code were enough to solve the problem, is there no such solution for the error messages here? In first line non supported CSS property flex-shrink, and then less often padding-bottom, flex-grow, padding-left, padding-right, padding-top
You can try overriding the settings flagged by Google PSI which are these.
.wpsp-overlay .wpsp-content-wrap { transition: none !important; }OK, with this CSS the padding-bottom, flex-grow, padding-left, padding-right, padding-top disappear.
The flex-shrink message persists and it is only on two lists, which are set to show 3 cards in 3 columns on all devices. I have other lists on the page with identical settings which show only 1 card in 1 column on mobile and there the error is not present.
The only way to make the Unsupported CSS Property: flex-shrink error disappear is diabling image zoom on hover.
When I hover over the description in PSI screenshot (src=…) I see
div.wp-show-posts-inner > div.wp-show-poss-image > a > img.center
- You must be logged in to reply to this topic.