LeaVerou/conic-gradient

Mobile support

Opened this issue · 10 comments

Any thoughts on implementing mobile support? Currently it is not working and I couldn't find any reference to mobile support in documentation.

iPhone 6, iOS 8.3, Safari

img_0468

The issue is with Safari in general, not just mobile.
It's probably easy to fix and I will look into it at some point soon, but I was hoping someone else will debug it earlier and send a PR :P

Ahh, makes sense. Must be something with WebKit as Chrome on iOS doesn't work as well.

Seems IE 9 ~ 11 don't work as well.
ie11

eonj commented

Current version of this polyfill depends on at least two browser feature: 2D drawing context and toDataURL() of HTML5 Canvas, and SVG image support with <image> tag provided via data URI. IE 8~11 and EdgeHTML 14.14393 also lacks the latter.

@Uni- I think EdgeHTML does support it...

http://codepen.io/chriscoyier/full/ZQgvyG/

in Edge Mobile (W10M EdgeHTML 15.14965)
wp_ss_20161223_0001

eonj commented

@kumarharsh You're right. Base64 data URI image is supported, but I think there is bug on using it background image.

Edge (EdgeHTML 14.14393):

Edge

IE 11 (11.576.14393):

IE 11

@Uni- oh yes, you're right. I didn't notice that. Let's hope something improves with Edge soon...
Update: Filed a bug report: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10304656/

@Uni- I've verifiable information that Edge does support the whole spec. The only reason those examples don't render is because Edge wants everything after the utf8 part to be escaped. This is a platform difference between IE/Edge and other browsers. Use escape(SVG_URI) to verify.

Ref: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/

Reference image in Edge:

image

And here's a PR for it: #21

@KrisOlszewski @LeaVerou it's working for Edge mobile too

wp_ss_20170214_0001 1

Works from iOS v9...
image