Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebView with HTML string source does not render on old Android #1038

Closed
emiloberg opened this issue Nov 5, 2015 · 1 comment · Fixed by #1047
Closed

WebView with HTML string source does not render on old Android #1038

emiloberg opened this issue Nov 5, 2015 · 1 comment · Fixed by #1047
Labels
backlog bug done severity: medium
Milestone
1.5

Comments

@emiloberg
Copy link

It seems like older versions of Android doesn't render the WebView correctly when given a WebView with a src set to a HTML string.

Easiest describe with an example, given a simple page page like this:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout rows="*" columns="*" id="container" />
</Page>

And a Javascript file which just sets the src of the WebView to an HTML string:

var webViewModule = require('ui/web-view');
var gridLayout = require('ui/layouts/grid-layout');

function pageLoaded(args) {
    page = args.object;
    var wv = new webViewModule.WebView();
    var container = page.getViewById('container');
    gridLayout.GridLayout.setColumn(wv, 0);
    gridLayout.GridLayout.setRow(wv, 0);
    container.addChild(wv);

    wv.src = '<!DOCTYPE html>' +
        '<html lang="en">' +
        '<head>' +
            '<meta charset="utf-8">' +
            '<meta http-equiv="content-type" content="text/html; charset=UTF-8">' +
            '<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, user-scalable=0" />' +
            '<title>Test Page</title>' +
        '</head>' +
        '<body>' +
            '<h1>Hi there</h1>' +
            '<h2>Here are some Swedish characters: ÅÄÖ</h2>' +
        '</body>' +
        '</html>';
}

exports.pageLoaded = pageLoaded;

The above works perfectly on all my devices. However, I've got a bug report from a user running Android 4.3/API 18 (on a Samsung Galaxy S3). On her device, the WebView displays the HTML code:

4216470493659screenshot_2015-10-29-12-08-51

After a long time debugging, it looks like her 4.3 device doesn't understand the MIME type text/html; charset=utf-8 set in web-view.android.ts, and renders it as text/plain instead.

When removing the ; charset=utf-8 part on both places in the file linked above, it worked and rendered as it should.

However. The ; charset=utf-8 part was added (by me in this PR) because internet suggested it was needed for UTF-8 characters to work on some API versions. (E.g. StackOverflow).

As I don't have a battery of devices/tests I don't feel comfortable sending a PR removing this.

Imho what needs to be done is:

  1. Remove the ; charset=utf-8
  2. Run tests to see that UTF-8 characters (such as ÅÄÖ) are still displayed on all devices from API 17 up to todays number
  • when given a HTML string.
  • when given a the URI to a local HTML file inside the {N} app
  • when given a the URI to a web page on the internet (such as https://en.wikipedia.org/wiki/Ö )
@enchev enchev self-assigned this Nov 6, 2015
@enchev enchev mentioned this issue Nov 6, 2015
Merged
@enchev enchev added this to the 1.5 milestone Nov 6, 2015
@enchev enchev added the done label Nov 6, 2015
@Exilz Exilz mentioned this issue Jan 24, 2017
Closed
@Etheryte Etheryte mentioned this issue May 5, 2017
Closed
This was referenced Jul 27, 2017
Closed
Closed
facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Oct 4, 2017
@Etheryte @facebook-github-bot
Fix Android 4.1-4.3 WebView source baseUrl bug
59d9f8c 
Summary:
Resolves #11753 and #9835.

Android versions 4.1-4.3 don't understand the MIME type `text/html; charset=utf-8` and default to `text/plain` instead, rendering the content as an unparsed HTML string. Since the encoding is already set and passed separately, removing it from the MIME type has no negative effects.

The same fix has already been discussed, successfully tested and incorporated in NativeScript/NativeScript#1038.
Closes #13789

Differential Revision: D5971910

Pulled By: shergin

fbshipit-source-id: 07795bdf0f13ddb1e8eec779d1cad59244f3687e
@lock
Copy link

lock bot commented Aug 30, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot unassigned enchev Aug 30, 2019
@lock lock bot locked and limited conversation to collaborators Aug 30, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
backlog bug done severity: medium
Projects
None yet
Milestone
1.5
Development

Successfully merging a pull request may close this issue.

Web view utf fix NativeScript/NativeScript
3 participants
@emiloberg @enchev @N3ll