Reactive Web App - CSS not working in Mobile

Hi all,

I have a reactive web app; CSS for an image is not working in mobile but working in browser.  CSS from browser below.

I tried the following to fix:

  • Add !important as shown below.  
  • Modified in-line. 
  • Updated dependencies.

All no luck.  Any help appreciated. 

Thanks,

Brad


.mainimage{
    clip-path: inset(13.2px 13.2px 13.2px 13.2px) !important;
}




Solution

Hi,

Maybe because mobile browsers do only partially support clip-path.

See https://caniuse.com/#search=clip-path

Regards,

Daniel

Solution

Hi Bradford,

I have used clip-path property before and it worked fine atleast android devices. I haven't checked it on iOS devices. 

As Daniel said mobile browsers partially support clip-path. Can you please share if you have checked on different devices and if it is working on some.

Thank you Daniel and Nikhil. Adding -webkit- appears to have done it


.mainimage{
    -webkit-clip-path: inset(13.2px 13.2px 13.2px 13.2px);
}