CODEWITHSUNDEEP
csscordovaios7emoji
AskeG
AskeG

Reputation: 345

Emojis won't scale beyond 16px font-size on IOS 7

We're making an app in phonegap using web-pages in the UIWebView, and in this product we allow apple's emojis, which we apply the AppleColorEmoji font to, making it possible to scale them.

After updating to IOS 7 on both iPad and iPhone, the emoji with font AppleColorEmoji that previously allowed for scaling to whichever size wanted, no longer scales beyond 16px font-size (it can scale smaller). It still scales as intended on the devices with IOS <7

I fear this is something they introduced in IOS 7 intentionally. Have anyone else experienced this problem, and perhaps even a solution to it?

Upvotes: 9

Views: 8316

Answers (7)

Zero Distraction
Zero Distraction

Reputation: 1356

In Webkit, to scale such emoji character in a HTML element:

<span style="-webkit-transform: scale(5); position: absolute;">&#x1f47f;</span>

Downsides to the above include that the positioning will need adjusting for the size, since the transform has to be applied to elements with position absolute. Pixelation could also happen, if the emoji is transformed too large.

Upvotes: 6

John Elliott
John Elliott

Reputation: 1

I have a great scenario here to learn if it's the OS:

  • I have an iPhone 4s, iOS 9.3.5: small emoji
  • I have an iPhone 5s, iOS 9.3.5: small emoji
  • I have an iPhone 6s, iOS 10 GM: big emoji scale from css font-size property
  • I am updating the iPhone 5s from 9.3.5 to iOS 10.0 as I type this, so we'll see if this fixes it.

My initial hypothesis was that it was related to viewport size, but after hooking the 4s/9.3.5 up to the safari browser tools with the 30-pin cable interestingly, the bounding boxes of the emoji scale, just not the glyph on screen. There's no way I was able to effect that with CSS.

¯\_(ツ)_/¯ I'll update this once the 5s updates.

Edit: Once I updated the 5s to 10.0 the emojis were resizing. It looks like iOS version was the issue.

Upvotes: 0

jobukkit
jobukkit

Reputation: 2670

Nowadays, you can use image files from Google Noto, EmojiOne, Twemoji, or Emojidex.

Even if you don't have scaling issues, this ensures that emoji characters display correctly in every browser.

Upvotes: 2

ghenne
ghenne

Reputation: 1903

Looks like this one is fixed in iOS 10.

Upvotes: 0

Litherum
Litherum

Reputation: 23344

iOS WebKit https://trac.webkit.org/changeset/188737 fixes this (but it hasn't shipped yet).

Upvotes: 1

AskeG
AskeG

Reputation: 345

If this is still interesting for anyone (I forgot that this was still open) then the "solution" was to set the meta tag for iPhones to:

<meta name="viewport" content="width=320"/>

This ensures that the iPhone scales the content up to fit the 640 pixels (or more) the screen has, and the emojis with 16px size will now be twice as big. However, this will only scale them up to a reasonable size. It still doesn't fix it for the people wanting to control the font-size completely.

Upvotes: 2

Nirav
Nirav

Reputation: 119

If you want to scale Emoji characters more than 16px, then you'll have to use AppleColorEmoji Fonts. This is the only available font that can scale Emoji beyond 16px.

Upvotes: -4

Related Questions