Sign in to follow this  
themoonrat

context.scale and gradients on iOS

Recommended Posts

I've come across a problem that I think is a bug in iOS /  Mac safari canvas implementation, and wondering if anyone else has come across it or found any work arounds.

http://moonrat.co.uk/html5/ios-text-gradient-scale/

Here are 3 implementations of the same effect in native canvas, in phaser 3 and in pixi 5. It's text with a gradient and a drop shadow, but with the text scaled down to 0.75 scale. On a desktop / android / mac / linux / anywhere, you'll see it looks correct, like: https://i.imgur.com/1qPV0r9.png

But on ios the drop shadow is in the wrong place: https://i.imgur.com/bhfo6zN.png - If the scale is set to 1, then it works correctly, but anything else and it's all over the place.

At first I thought it was an error I'd introduced in pixi v5, but i tried phaser 3 and it has the same issue. I then tried just using the canvas api, and it happens there too. This occurs on ios 11 and ios 12 (not tried earlier) 

It's crazy.

I've often used lower resolution text on lower end devices for performance reasons, so this is a real killer to being able to do that.

Any ideas? Or Workarounds?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.