Home › Forums › Pro Support › Pagespeed insight complains about non supported CSS properties
- This topic has 19 replies, 2 voices, and was last updated 2 years, 2 months ago by
elvin.
-
AuthorPosts
-
September 3, 2021 at 10:26 am #33461
Bernhard
ParticipantHello,
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?
September 6, 2021 at 11:23 pm #33540elvin
ModeratorHi 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?
September 7, 2021 at 1:50 am #33548Bernhard
ParticipantHi Elvin,
it disappears when WP Rocket is disabled.September 7, 2021 at 6:22 pm #33570elvin
Moderatorit 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-posts
and/wp-content/plugins/wp-show-posts-pro
from CSS aggregation/merge.September 8, 2021 at 1:16 am #33588Bernhard
ParticipantOk, 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.
September 8, 2021 at 6:53 pm #33608elvin
ModeratorNow 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. 🙂
September 9, 2021 at 10:00 pm #33647Bernhard
ParticipantOK, 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
September 14, 2021 at 1:37 pm #33794Bernhard
ParticipantHello,
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?September 14, 2021 at 6:42 pm #33817elvin
ModeratorHi 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)?
September 14, 2021 at 11:04 pm #33823Bernhard
ParticipantHi 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; } }
September 14, 2021 at 11:16 pm #33825Bernhard
ParticipantThese are the image settings of the overlay cards screenshot
September 15, 2021 at 12:06 am #33826elvin
ModeratorCan 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. 😀
September 15, 2021 at 12:48 am #33828Bernhard
ParticipantDo 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
September 15, 2021 at 1:04 am #33830elvin
ModeratorYou can try overriding the settings flagged by Google PSI which are these.
.wpsp-overlay .wpsp-content-wrap { transition: none !important; }
September 15, 2021 at 7:26 am #33846Bernhard
ParticipantOK, 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
-
AuthorPosts
- You must be logged in to reply to this topic.