Webview rendering website incorrectly

Question

the situation follows: i created a webview app what loads https://cstudios.sk/pemobil/. The site works fine on both the native android browser and on chrome. Also it is okay on most of the phones, but on galaxy S4 the system does not rendering some parts. Later, under usage it will partially correct itself, but not entirely.

https://www.dropbox.com/s/c9jtb9fc4fvohls/2013-08-02%2000.14.42.png << screen of the badly rendered page.

MainActivity.java:

    package sk.cstudios.pizzaextraonline;

import android.R.bool;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Bitmap;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebSettings.RenderPriority;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

    WebView pizzaExtraView;
    ProgressDialog loadingMessage;
    boolean loaded; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (!isNetworkAvailable())
        {
            new AlertDialog.Builder(this)
            .setTitle(getResources().getString(R.string.nonet_title))
            .setMessage(getResources().getString(R.string.nonet_description))
            .setPositiveButton(getResources().getString(R.string.nonet_closeapp), new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) { 
                    // continue with close app
                    finish();
                }
             })
            .setNegativeButton(getResources().getString(R.string.nonet_gosettings), new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) { 
                    // go to settings
                    Intent intent = new Intent(Intent.ACTION_MAIN);
                    intent.setClassName("com.android.settings", "com.android.settings.wifi.WifiSettings");
                    startActivity(intent);
                    finish();
                }
             })
             .show();
        } else {

        loaded = false;
        pizzaExtraView = (WebView) findViewById(R.id.webview);
        pizzaExtraView.setWebViewClient(new Cwebview());
        WebSettings webSettings = pizzaExtraView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setLoadsImagesAutomatically(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setDatabasePath("data/data/com.xxx/databases");
        webSettings.setDomStorageEnabled(true);
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSettings.setSupportZoom(false);
        webSettings.setAllowFileAccess(true);
        webSettings.setSavePassword(true);
        webSettings.setSupportMultipleWindows(false);
        webSettings.setAppCacheEnabled(true);
        webSettings.setAppCachePath("");
        webSettings.setAppCacheMaxSize(5*1024*1024);
        webSettings.setRenderPriority(RenderPriority.HIGH);
        pizzaExtraView.loadUrl("https://cstudios.sk/pemobil/");
      }
    }

    @SuppressLint("NewApi")
    public class Cwebview extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //if (Uri.parse(url).getHost().equals("https://cstudios.sk/") || Uri.parse(url).getHost().equals("https://www.cstudios.sk/")) {
            if(true) {
                //pizzaExtraView.loadUrl(url);
                view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
                return false;
            }
            view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
            /*Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);*/
            return true;
        }
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            if(!loaded) {
                loadingMessage = ProgressDialog.show(MainActivity.this,getResources().getString(R.string.loading_title),getResources().getString(R.string.loading_decription),true);       
                }
            }

        @Override
        public void onPageFinished(WebView view, String url)
        {
            if(!loaded) {
            loadingMessage.dismiss();
            loaded = true;
            }
        }
    }

    private long lastpressed;
    private static final int PERIOD = 333;

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK) {
            if((event.getEventTime() - lastpressed) < PERIOD)
            {
                Log.println(10, "testing", "doubletapped");
                finish();
            } else {
                lastpressed = event.getEventTime();
                Context context = getApplicationContext();
                Toast toast = Toast.makeText(context, getResources().getString(R.string.back_hint), Toast.LENGTH_SHORT);
                toast.show();
                pizzaExtraView.goBack();
                return true;
            }
        }

        return false;
    }

    private boolean isNetworkAvailable() {
        ConnectivityManager connectivityManager 
              = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
        return activeNetworkInfo != null && activeNetworkInfo.isConnected();
    }

}

and the manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sk.cstudios.pizzaextraonline"
    android:versionCode="3"
    android:versionName="1.0.020803" android:installLocation="preferExternal">

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="14" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar"
        android:hardwareAccelerated="true" >
        <activity
            android:name="sk.cstudios.pizzaextraonline.splash"
            android:label="@string/app_name"
            android:hardwareAccelerated="true" 
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name="sk.cstudios.pizzaextraonline.MainActivity"
            android:label="@string/app_name"
            android:hardwareAccelerated="true" 
            android:screenOrientation="portrait">
            <intent-filter>

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

any idea what is causing the problem? You can freely test the site, its not connected to the ordering system yet.

Answer 1

try changing

view.setLayerType(View.LAYER_TYPE_HARDWARE, null);

to

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

or delete it at all. It seems that there is a problem with hardware acceleration

from docs:

use LAYER_TYPE_HARDWARE only if hardware acceleration is turned on for the view hierarchy if hardware acceleration is turned off, hardware layers behave exactly as software layers.

I would delete this line

Check if your view is hardware accelerated:

View.isHardwareAccelerated() ///returns true if the View is attached to a hardware accelerated window.

...but then again:

Even if this method returns true, it does not mean that every call to draw(android.graphics.Canvas) will be made with an hardware accelerated

Check also if you are using ProGuard, it may optimize too much. Would advice to turn it off

Try also explicitly defining hardware acceleration for your application:

<application android:hardwareAccelerated="true" ...>  || <application android:hardwareAccelerated="false" ...>

So, overall, play with all those possible variables and maybe some configuration will be better than your current one

Btw, those pictures that are rendered in the wrong way, how they are displayed in HTML on the web page? Canvas, Img, etc.?