Clip-path bug on android


#1

Hi everyone!

I’m trying to use clip path in my app and it works fine here’s the code:

clip-path: inset(0px 50% 0px 0px);
-webkit-clip-path: inset(0px 50% 0px 0px);

(source: https://css-tricks.com/clipping-masking-css/)

the problem is on my android app it simply doesn’t work so I have two questions:

  1. Is there a way to use the inspect element tool in android devices? (for example I can use safari develop tab to accomplish this)

EDIT:

There’s a tutorial about how to allow inspect element on a device: https://developer.chrome.com/devtools/docs/remote-debugging

  1. Am I forgetting to include some property to support this on android?

Thanks.

ps: I can’t build a codepen because this bug only appears when I run on an android device, I was just wondering if anyone had a similar issue.


Clip Path not working on Android
#2

Hi - I’m wondering if you ever found a solution for this? I’m seeing a similar issue with clip-paths not working on Android devices.


#3

Hi @mmcginty

the solution for this was to use svgs: http://sarasoueidan.com/blog/css-svg-clipping/

:smile:


#4

Thanks very much! We decided to just go a different way with the design but I will save this reference for the future.


#5

Didn’t work for me, even with svg :frowning:
Here is a Fiddle working on Chrome pc, but not working on Android, from ionic: https://jsfiddle.net/f6633a79/