WebView does not render css like the browser does?

Question

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!

I could suggest a couple troubleshooting ideas to help get some more information. 1.) When you say that it renders correctly on your phone's browser, just to make sure, is this phone the same place you are running your app? CSS support differs in different versions of Android. 2.) If you remove all the views and only have a WebView in your layout does it change anything? 3.) If you open other websites into your WebView that have background positions and absolute positions (possibly websites with html/css examples) do the same problems exist, or is it just your html/css? — cottonBallPaws
– cottonBallPaws, Commented Nov 25, 2011 at 19:07
I thank you for your input as it lead me down the correct path! I found out what was happening, please check out my question above (at the very top) for the answer :) — RedactedProfile
– RedactedProfile, Commented Nov 25, 2011 at 19:50
Thanks. Helped me a lot. setLayoutAlgorithm(LayoutAlgorithm.NORMAL) did the trick for me. — jannej
– jannej, Commented Apr 25, 2012 at 12:28
You should take the answer that you discovered and insert it as the answer below (then accept it), rather than making it an edit on your question. — XML
– XML, Commented Aug 24, 2012 at 15:01

Lorenzo Vincenzi · Accepted Answer · 2021-09-08 05:13:12Z

5

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.