Search code examples
androidfacebookandroid-webviewandroid-4.4-kitkatfacebook-likebox

Facebook "Like Box" page disappears after brief moment in Android 4.4 KitKat WebView

An Android app uses a WebView to display a Facebook Like Box. On 4.1.2 and 4.3 the page appears correctly when the following code is used.

String url = "https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FGoogle&width&height=395&colorscheme=light&show_faces=false&header=false&stream=true&show_border=false";

WebView webview = (WebView) findViewById(R.id.web_content);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());
webview.setWebViewClient(new WebViewClient());
webview.loadUrl(url);

On 4.4.2 the page looks good in the full-on Chrome app; however, the behaviour is not good when loaded in the WebView as coded above. There is a brief flash of a fully-rendered page then the WebView goes totally white. Nothing is visible and scrolling does nothing.

I have used chrome://inspect to watch the page as it loads, but it doesn't support showing network requests. The output of running document.location.href; at the console is about:blank, though, which is a clue.

Some ideas I've tried based on various threads:

  • Disabling hardware acceleration
    • Using webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
    • Using android:hardwareAccelerated="false" in AndroidManifest.xml
  • Disabling JavaScript
    • This can't work because the Like Box requires JS to display at all
  • Some methods on webview.getSettings()
    • .setSupportZoom(true), .setSupportZoom(false)
    • .setUseWideViewPort(true), .setUseWideViewPort(false)
    • .setLoadWithOverviewMode(true), .setLoadWithOverviewMode(false)
  • Running custom CSS after the page is loaded to set a white background
    • I make sure it runs by creating an alert() directly afterward

At this point I may have to resort to starting an intent when running in 4.4 so the page is loaded by the browser in that case, but I would prefer to find a fix for the blank WebView. Are there any other settings I can tweak?

Solution

  • The above doesn't repro for me on 4.4

    I have used chrome://inspect to watch the page as it loads, but it doesn't support showing network requests.

    It totally does support showing network requests. Try this - in your app comment out loading the URL, just new the WebView up. Connect via DevTools and type window.location = 'https://....';

    The output of running document.location.href; at the console is about:blank, though, which is a clue.

    Sounds like this is it. I'm not sure what the HTML/JS you end up loading does, maybe the JS tries to navigate to some weird URL? Try setting a WebViewClient that logs all shouldOverrideUrlLoading calls and see if you're getting a non-http(s) URL there. Try returning true for that URL.