CSS clip path changed when asset optimisation used

  • Resolved katmacau

    (@katmacau)


    4 years, 2 months ago

    Hello. I discovered an issue with the path for my clip path is changed and breaks when using asset optimisaton on my css.

    In the original file I have:

    .is-style-blob-shape img {
  width: calc(100% - 10px);
  -webkit-clip-path: url(#blob-clip-path);
  clip-path: url(#blob-clip-path);
}

    And in my page I have <clipPath id=”blob-clip-path”> for the path to use. That works fine. But when I use asset optimisation and minify the file its converting that relative path to an absolute one, changing the rule incorrectly to:

    .is-style-blob-shape img {
  width: calc(100% - 10px);
  -webkit-clip-path: url(https://www.mydomain.info/wp-content/themes/mytheme/#blob-clip-path);
  clip-path: url(https://www.mydomain.info/wp-content/themes/mytheme/#blob-clip-path);
}

    I need it to stay as just #blob-clip-path for it to work. Please advise.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Kris – WPMU DEV Support

    (@wpmudevsupport13)

    4 years, 2 months ago

    Hi @katmacau

    I hope you are doing good today.

    I made some tests on my lab and I could not replicate this. Could you let us on how to replicate this issue?
    Does CSS is added in Appearance -> Customize -> Additional CSS
    or
    is this located in theme/child theme css file
    or
    plugin css file

    Also, does Asset Optimization is set up as Automatic or manual?

    Kind Regards,
    Kris

    Thread Starter katmacau

    (@katmacau)

    4 years, 2 months ago

    Hi Kris

    Sure, it’s part of my theme file – style.css. I set to automatic asset optimization. When I added styles to the exclude list, that solved it.

    Here is what I have in my footer for the html the css is referencing.

    <div style="position: absolute; top: 0; left: 0; z-index: -1; width: 0; height: 0;">
<svg class="svg">
  <clipPath id="blob-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.192,0.963 c0.32,0,0.32,0.037,0.639,0.037 c0.096,0,0.151,-0.096,0.151,-0.189 c0,-0.31,0.018,-0.31,0.018,-0.62 c0,-0.093,-0.073,-0.191,-0.168,-0.191 c-0.32,0,-0.32,0.048,-0.639,0.048 c-0.096,0,-0.173,0.05,-0.173,0.143 c0,0.31,-0.02,0.31,-0.02,0.62 C0,0.904,0.097,0.963,0.192,0.963"></path></clipPath>
</svg>
</div>

    Thank you!

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

The topic ‘CSS clip path changed when asset optimisation used’ is closed to new replies.