[AC-6463] Rotating iPhone resizes text in WebView if there is an <a> tag

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	n/a
Reporter	Matthew Delmarter
Assignee	Shak Hossain
Created	2019-12-30T01:03:50.000+0000
Updated	2020-01-01T21:46:14.000+0000

Description

This is a weird one, but also a major issue for me as I use WebViews heavily in an existing app to render html content from epub files etc. I have simplified this down to the following code to demonstrate the issue. The first example works ok, no matter what orientation...

var win = Ti.UI.createWindow();

var html = '<html>';
html += '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">';
html += '<style>';
html += 'html, body, div { font-size: 20px; }';
html += '</style>';
html += '<body>';
html += '<div>Text does not resize :)</div>';
html += '</body></html>';

var webview = Ti.UI.createWebView({
    html: html
});

win.add(webview);

win.open();

However if I change the code to include a link, then suddenly when the device is rotated, the text size does change - it gets larger in landscape...

var win = Ti.UI.createWindow();

var html = '<html>';
html += '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">';
html += '<style>';
html += 'html, body, div { font-size: 20px; }';
html += '</style>';
html += '<body>';
html += '<div><a>link</a>Text suddenly resizes :(</div>';
html += '</body></html>';

var webview = Ti.UI.createWebView({
    html: html
});

win.add(webview);

win.open();

I have verified that this is an issue on the simulator for iOS 13.3 and 12.4 and a real device (iPhone XS Max, iOS 13.3).

Comments

Michael Gangolf 2019-12-30

This should be fixed by adding

   body {
     -webkit-text-size-adjust: none;
   }

Matthew Delmarter 2020-01-01

Fix verified as working perfectly. Thanks Michael.

JSON Source