Question 184251 in CSS Question posted in
Some basic documentation can be found here.

How to hide css offset-path property in safari? CSS supports rule doesn't work as expected

CSS motion path isn’t supported in safari. I’ve tried using CSS supports rule to target offset-path but it isn’t working.

if (CSS.supports("offset-path", "M0.5 1H1549.5")) {
   console.log("supported yay");
   // Motion path is not supported, apply fallback styles or alternative actions
   //   element.style.transform = "translateX(100px)";
} else {
   console.log("not supported");
}

I try this logic and it doesn’t work in chromium browsers. What am I doing wrong?

Tags:

2

Answers


  1. 0

    The second parameter for CSS.supports() has to be a valid value. Did you perhaps forget to wrap your value in path?

    // Returns false, the value is not a valid value
console.log(CSS.supports("offset-path", "M0.5 1H1549.5"));

// Returns true on Chromium browsers
console.log(CSS.supports("offset-path", "path('M0.5 1H1549.5')"));
    Login or Signup to reply.
  2. 0

    Chromium browsers do support offset-path property with path() values.

    But CSS.supports() requires the correct value syntax and otherwise, it’ll return false. There’s no in-between, i.e. a result that says "It supports the value but the syntax is incorrect".

    So, just use the correct value like this:

    if (CSS.supports("offset-path", `path("M0.5 1H1549.5")`)) {
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search