Problem with CSS for clip path SVG

  • Resolved TheRiddler1982

    (@theriddler1982)


    10 years, 11 months ago

    Hi,

    can you help me with the CSS problem I ran into once I’ve activated the “Optimize CSS ” option?

    The problem only occures in Firefox. Please have a look at http://www.ziin.de and scroll down to the bottom. You see a diagonal line (<section id=”footerLogoSection” class=”clipped clippedTop”>

    <clipPath id=”clipPolygonTop”>
    <polygon points=”0 0,0 842,1265 842,1265 220″></polygon>
    </clipPath>

    )

    This is used in the footer of my homepage. On the other side, if you have a look at http://www.ziin.de/foto the diagonal line is not shown. It uses the same CSS and the same footer.

    Once I deactivate the CSS optimization, the diagonal line is shown on http://www.ziin.de/foto.

    I’ve no clue what’s causing that.

    Can you help me?

    Thanks a lot!

    Bye,
    Sven

    https://ww.wp.xz.cn/plugins/autoptimize/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Frank Goossens

    (@futtta)

    10 years, 11 months ago

    add “clippedBottom” (without the quotes) to the comma-seperated CSS exclusion-list and it should be OK.

    frank

    Thread Starter TheRiddler1982

    (@theriddler1982)

    10 years, 11 months ago

    Wow, thanks! That worked :-). I never thought about that as the box ist just mentioning css files and not classes as well :-). Do you have an idea why this is necessary? The main page works but others don’t. So I am just curious 🙂

    Thanks again!
    Sven

    Thread Starter TheRiddler1982

    (@theriddler1982)

    10 years, 11 months ago

    Solved!

    Plugin Author Frank Goossens

    (@futtta)

    10 years, 11 months ago

    Do you have an idea why this is necessary?

    well …

    section.clipped.clippedTop { clip-path: url("#clipPolygonTop"); }

    got optimized to

    section.clipped.clippedTop { clip-path: url("//ziin.de/#clipPolygonTop"); }

    which is wrong obviously. I’ve added it to the list of things to improve for the next release 🙂

    frank

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Problem with CSS for clip path SVG’ is closed to new replies.