Curve/Arc text on safari disappear.

[dolphine4u]

[softwaretailoring]

Please try it again. I've modified the code behind the demo (not committed yet).
https://codepen.io/softwaretailoring/pen/eLNBYz

If the above link doesn't work, please try the debug version.
https://s.codepen.io/softwaretailoring/debug/eLNBYz

[dolphine4u]

still doesn't seem to work on IOS and mac devices. checked it on my iphone the text disappears even on chrome browser.

[dolphine4u]

I'm still struggling with this issue any help will be appreciated.

[softwaretailoring]

I tried to solve this yesterday, but no solution yet.

I modified the textPath's attribute because Safari can handle only xlink:href.
https://stackoverflow.com/questions/51404939/svg-textpath-not-working-in-safari

As I see currently Safari cannot handle dynamically generated SVG correctly.
When I use the following code (the end of createWheel), it renders correctly, however, all event handlers go wrong.

if (navigator.vendor.toLowerCase().indexOf('apple') > -1) {
    var wheelSafari = document.getElementById(this.holderId);
    wheelSafari.innerHTML = wheelSafari.innerHTML;
}

I've created a private pen with this, please check it out.
https://s.codepen.io/softwaretailoring/debug/c8cd61f89a8b2b5d8beaef01b64a397f

Do you know a way to Safari re-render a dynamically generated SVG?

[dolphine4u]

Sorry I don't know much about SVG.

[softwaretailoring]

And what do you see now on the above link? Maybe Chrome on Mac works now?

This is a quite complicated issue...

[dolphine4u]

I can see the text but it doesn't seem to respond to any event handlers on Iphone and IPad on chrome but works on mac.

[dolphine4u]

Any hacky fix so that i can disable curve text only on safari as the normal text appears to work fine on ios devices.

[softwaretailoring]

I suggest that fork this and modify code here:
https://github.com/softwaretailoring/wheelnav/blob/master/js/dist/wheelnav.js#L1483

if (this.wheelnav.titleCurved !== null && this.titleCurved === null && navigator.vendor.toLowerCase().indexOf('apple') == -1) { this.titleCurved = this.wheelnav.titleCurved; }

Does it work for you?

[dolphine4u]

Thank you its working.

[softwaretailoring]

It's great!
May I check your result with wheelnav.js? :)
Can you check my answer on StackOverflow also? ;)

[dolphine4u]

I will share the link once it's live.

[softwaretailoring]

Okay, it would be great! I'll place it in the http://wheelnavjs.softwaretailoring.net/spinit.html#worldwidewheel section if you think so. Thank you for SO mark!

[dolphine4u]

That's absolutely fine. Please find the link below http://survitecgroup.com/marine/

…

On Tue, Sep 4, 2018 at 3:25 PM Gábor Berkesi ***@***.***> wrote: Okay, it would be great! I'll place it in the http://wheelnavjs.softwaretailoring.net/spinit.html#worldwidewheel section if you think so. Thank you for SO mark! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#84 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMK6N49UYfLxJvMVZqcarWCn1aOq5ylSks5uXo1ygaJpZM4WRK_V> .

-- Thank You, Dolphine

[softwaretailoring]

Thanks!
I've modified the Worldwidewheel section.
Please check it and let me know if you want to modify something.

[dolphine4u]

Did you get a chance to resolve the curve text issue on IOS devices.

[softwaretailoring]

Not yet. :(

[brianjuhl]

I know it's been awhile. Were you guys ever able to find a fix for this? Curved text is completely disappearing on Mac running Safari. Looks great in every other browser!

[softwaretailoring]

Not yet. :(

[brianjuhl]

No worries!! I actually worked around this on Safari by using images. Client was happy, so am I. Thank you for all your hard work!!!

[softwaretailoring]

Fun fact. I've answered a question on Stack Overflow by using images just now.
https://stackoverflow.com/questions/54455290/wheelnav-menu-with-text-and-icon
I don't understand why I didn't suggest it to you too... :)

[Sibinraj]

Hi, Can you able to help me to sort out this issue?
https://stackoverflow.com/questions/55243617/wheelnav-menu-click-not-working-when-using-curvetext-functionality

[matthiassommer]

I want to display curved text but it does not work on Mac/ipad/ios.
I am using wheelnav v1.8.0.

The workaround from #84 (comment) helped to show the text at all but as it is not curved, it is not fully visible and goes outside of the rings.

Update: I manually updated Raphael to v2.3.0 and now it works on iPhone etc. as well
https://github.com/DmitryBaranovskiy/raphael/releases/tag/v2.3.0