Wrong slice selection in IOS safari

[elvis7449]

All other browsers are working fine with my code. Only in ios safari i have problems with the selection. When I clicked on a slice it wasn't always jumping to the one I selected. It selects some other slice. Any idea whats happening? And how to i center wheelnav to any screen resolution?

[softwaretailoring]

Hi @elvis7449 Please add your source code for investigation. A JSBin or JSFiddle would be the best.

[softwaretailoring]

Sorry, I cannot reproduce your issue based on above code... Please add your working version to https://jsbin.com Or send all of your source code to me via email. (You can find my email address on my GitHub profile)

[elvis7449]

okay here it is:

https://jsbin.com/jipavahavu/edit?html,css,output

[elvis7449]

it seems to me that when i lower wheel1.animatetime to 300ms, it works for 2 to 3 continuous clicks until it again jumps to a wrong slice.

P.S: I am using jquery in my website and this problem only occurs to me in IOS mobile safari. Thank you

[softwaretailoring]

Please try with this version of raphael.js:

<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script>

[elvis7449]

Cool, will give you an update after trying.. Cheers

[elvis7449]

Sorry to say with that version also the same thing is happening :(

[softwaretailoring]

Hmm... Unfortunately I cannot reproduce your issue in my environment. I have desktop Safari on Windows.

I think the wheel2 is unnecessary. You can achieve same result (and better performance) via wheel1.raphael.image("donut.svg", 0, 0, 400, 400);

Do you have same issue on a simpler wheelnav? For example: http://wheelnavjs.softwaretailoring.net/documentation/core.html#sectionProperties

[elvis7449]

Actually the wheel2 is for that border only.. ;-) Any simple way to make such border? Nope i haven't tried a simpler wheelnav. Will try and let you know.

[softwaretailoring]

"Any simple way to make such border?" wheel1.raphael.image("donut.svg", 0, 0, 400, 400); Where donut.svg is the border image.

[elvis7449]

So this is how i see it: https://jsbin.com/xazuyanizo/edit?output

[softwaretailoring]

Here is a better version:

wheel1.raphael.path("M200,20L200,0A200,200,0,0,1,200,400A200,200,0,0,1,199.99999999999997,0L199.99999999999997,20A180,180,0,0,0,200,380A180,180,0,0,0,200,20Z").attr({"fill":"#f58866","stroke-width":"0"});

https://jsbin.com/tuwigakugu/edit?js,output

[elvis7449]

Thank you so much. But still that wrong selection issue isn't solved. You may close this issue though 👌

[softwaretailoring]

I'm sorry. Were you able to check a simpler wheelnav? It would be good to know that IOS mobile Safari doesn't supported at all or only with restriction.

[Mubashirkhan]

was any one able to solve this issue on mobile. I'm trying to use this plugin in a react native app but it doesn't work on the in app webview browser. Any ideas how we can fix that issue