WebView does not render css like the browser does?

Issue

As far as im aware, the WebView is the same thing as the built in browser? Right?

I am facing an issue where a page that contains some absolute positioned div elements all stack on top of eachother instead of finding their correct location, AND background-image gets completely ignored.

This said, in the browser on my phone (HTC Incredible S – 2.3.3, stock browser) renders it out correctly, and on top of this, applications that use an embedded webview that i can point it to the page, renders correctly. Which leads me to beleive that the webview I have in my application is bjorking somehow.

import android.app.Activity;
import android.content.Intent;
import android.graphics.Rect;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.*;

public class ShowWebView extends Activity {

    public WebView web;
    public String baseURL  "http://test.dev/";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webpage);

        web  (WebView) findViewById(R.id.webpage);
        home  (Button) findViewById(R.id.tool_Home);
        back  (ImageButton) findViewById(R.id.tool_Back);
        forward  (ImageButton) findViewById(R.id.tool_Forward);
        refresh  (ImageButton) findViewById(R.id.tool_Refresh);

        ajax  (ImageView) findViewById(R.id.test_anim);
        ajax.setBackgroundResource(R.drawable.ajax_animation);


        // Settings
        web.getSettings().setJavaScriptEnabled(true);
        web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        web.setWebViewClient(new WebViewClient());

        Bundle extras  getIntent().getExtras();
        if(extras ! null) {

            String url  baseURL+extras.getString("page")+"?androidApplication"; // The Basics, page gets added to baseURL
            String id  "";
            String push  "false"; // false by default

            // If an ID exists, lets get it
            if(extras.getString("id") ! null) {
                id  extras.getString("id");
            }

            if(extras.getString("push") ! null) {
                push  extras.getString("push");
            }

            // Build the URL
            if(id ! "") url  url + "&id"+id;
            if(push ! "false")     url  url + "&pushVersion";

            web.loadUrl(url);
        } else {
            web.loadUrl("http://www.bing.com");
        }
}

also heres my webview xml

<?xml version"1.0" encoding"utf-8"?>
<LinearLayout
    xmlns:android"http://schemas.android.com/apk/res/android"
    android:layout_width"fill_parent"
    android:layout_height"fill_parent"
    style"@style/MainPage"
    android:orientation"vertical" >

    <LinearLayout
        android:id"@+id/Header"
        android:layout_width"match_parent"
        android:layout_height"wrap_content"
        android:orientation"vertical" >


        <ImageView
            android:id"@+id/ImageView01"
            android:layout_width"match_parent"
            android:layout_height"42sp"
            android:scaleType"fitXY"
            android:src"@drawable/top_header" />

    </LinearLayout>
    <LinearLayout
        android:id"@+id/SubHeader"
        android:layout_width"match_parent"
        android:layout_height"wrap_content"
        android:orientation"vertical" >


        <ImageView
            android:id"@+id/imageView1"
            android:layout_width"match_parent"
            android:layout_height"28sp"
            android:scaleType"fitXY"
            android:src"@drawable/top_sub_header" />

    </LinearLayout>

    <LinearLayout
        android:id"@+id/linearLayout1"
        android:layout_width"match_parent"
        android:layout_height"match_parent"
        android:orientation"vertical" >








        <LinearLayout
            android:id"@+id/linearLayout2"
            android:layout_width"match_parent"
            android:layout_height"0dip"
            android:layout_weight"1"
            android:orientation"vertical" >

            <WebView
                xmlns:android"http://schemas.android.com/apk/res/android"
                android:id"@+id/webpage"
                android:layout_width"match_parent"
                android:layout_height"match_parent"
                 />

        </LinearLayout>




        <LinearLayout
            android:id"@+id/toolBar"
            android:layout_width"match_parent"
            android:layout_height"40sp"
            android:layout_marginTop"2.5sp"
            android:orientation"horizontal" >

            <Button
                android:id"@+id/tool_Home"
                android:layout_width"wrap_content"
                android:layout_height"wrap_content"
                android:text"Home" />


            <ImageButton
                android:id"@+id/tool_Back"
                android:layout_width"wrap_content"
                android:layout_height"wrap_content"
                android:src"@drawable/backward" />


            <ImageButton
                android:id"@+id/tool_Forward"
                android:layout_width"wrap_content"
                android:layout_height"wrap_content"
                android:src"@drawable/forward" />


            <ImageButton
                android:id"@+id/tool_Refresh"
                android:layout_width"wrap_content"
                android:layout_height"wrap_content"
                android:src"@drawable/refresh" />


            <ImageView
                android:id"@+id/test_anim"
                android:layout_width"wrap_content"
                android:layout_height"wrap_content"
                android:gravity"center"
                android:layout_centerHorizontal"true" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

any help resolving this issue would be truly amazing!

Solution

Apparently:

web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

was causing the webview to freak out, as it reorganizes the html renderer to place everything in a single column (or try to anyways). Disabling this line or using NORMAL causes the render to be just fine.

I was only using this line to disable horizontal scrolling. So now i have THAT issue to deal with again and still.

Answered By – RedactedProfile