Text in UIWebView changes size or weight on device rotation

Question

I have a UIWebView which at the moment displays a very simple HTML string. It looks fine in portrait but in landscape the text changes - the font looks heavier which is not what I want. See the image bellow:

Image of font render problem

The top line is what is shown in portrait and the bottom what is shown in landscape. The text is Chinese but the problem is the same with English.

Here is my code:

- (void)displayText
{
    [self.myWebView loadHTMLString:@"<html style=\"-webkit-text-size-adjust: none; font-size-adjust:none; \"><head><meta name=\"viewport\" content=\"width=device-width; initial scale=1.0; maximum-scale=1.0;\"></head><body style=\"background-color:#FFFFFF; font-size:28px; color:#DDDDDD;\">你好。你好。你好。你好。你好。你好。你好。你好。</body></html> " baseURL:[NSURL URLWithString:@""]];
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.myWebView reload];
}

Any ideas what I am doing wrong?

THANK YOU!

Possible duplicate of [Preserve HTML font-size when iPhone orientation changes from portrait to landscape](http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca) — Fattie, Jul 04 '16 at 14:19

score 2 · Answer 1 · edited May 23 '17 at 12:01

This CSS works for me:

-webkit-transform: translate3d(0,0,0);

I found the answer here:

UIWebView font is thinner in portrait than landscape

UPDATE:

One issue with the above CSS is there is some delay before text is rendered if the HTML is reloaded. I have found that setting the UIWebView's opaque property to FALSE works better:

self.myWebView.opaque = FALSE;

This seems like a bit of a hack. Hopefully there is a better solution.

Text in UIWebView changes size or weight on device rotation

1 Answers1