We're merging with GenerateBlocks! Learn more here.

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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Pagespeed insight complains about non supported CSS properties

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #33461
    Bernhard
    Participant

    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?

    #33540
    elvin
    Moderator

    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?

    #33548
    Bernhard
    Participant

    Hi Elvin,
    it disappears when WP Rocket is disabled.

    #33570
    elvin
    Moderator

    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-posts and /wp-content/plugins/wp-show-posts-pro from CSS aggregation/merge.

    #33588
    Bernhard
    Participant

    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.

    #33608
    elvin
    Moderator

    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. 🙂

    #33647
    Bernhard
    Participant

    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

    #33794
    Bernhard
    Participant

    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?

    #33817
    elvin
    Moderator

    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)?

    #33823
    Bernhard
    Participant

    Hi Elvin,
    these are my CSS settings in WP Rocket screenshot

    I 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;
    }
    }
    #33825
    Bernhard
    Participant

    These are the image settings of the overlay cards screenshot

    #33826
    elvin
    Moderator

    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. 😀

    #33828
    Bernhard
    Participant

    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

    #33830
    elvin
    Moderator

    You can try overriding the settings flagged by Google PSI which are these.

    .wpsp-overlay .wpsp-content-wrap {
        transition: none !important;
    }
    #33846
    Bernhard
    Participant

    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.