Unusual behavior displayed by Android webview

In landscape orientation, I have a horizontal layout with buttons on the left and a webview on the right like this:

Everything works fine in the WebView until an absolutely or fixedly positioned element is added to it.

For example, this element:

<div style="position:fixed; top:0; left:0; width:100%; height:30px; background:#ff0000"></div>

This is how it appears:

As you can see, there is a gap on the right that corresponds exactly to the size of the layout on the left. Essentially, the div's width is equal to the full width of the webview minus the width of the button layout.

This is what happens when the width of the button layout increases:

This causes issues with things like iScroll.

I've tried but haven't been able to resolve the problem.

androidcssandroid-layoutwebview

Answer №1

When encountering issues on Samsung ICS tablets, I found that disabling hardware acceleration was necessary. The position, overflow, and translate3d CSS properties were all affected by this.

To resolve this problem, you can turn off hardware acceleration in the manifest file:

<application android:hardwareAccelerated="false"

Alternatively, you can disable it programmatically like so:

if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
    myWebview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for adding or removing items using ID instead of classes?

Is there a way to change the highlight class to an id, so that clicking outside the products will not trigger the highlight effect? I have added the window.onload section with my desired changes, but I am unsure how to switch the class highlight to an id. ...

javascripthtmlcss

Modifying the location of an element in an array with jQuery

Using jQuery and JavaScript var movableItems = new Array(); movableItems.push($('#cloud1')); movableItems.push($('#comment1')); if(leftPressed == true){ for(var i = 0; i < movableItems ...

javascriptjqueryhtmlcssdhtml

Is Live SASS Compiler generating unnecessary files?

Currently, I am in the process of learning how to integrate SASS into my web development projects. However, I am facing some challenges when it comes to properly compiling my .scss files into a single .css file. Upon running sass --version in my terminal, ...

cssvisual-studio-codenpmsassvscode-extensions

Ways to achieve text transparency with CSS without converting it to an image

Is there a way to have my navigation bar indicate the selected page by changing the text color and adding a black background, while making only the text inside the current page nav transparent? For example, you can see the effect here: sammarchant.co.uk/n ...

css

Showing database information from MySQL in a concealed div using PHP

My HTML code for the div is as follows: <div id="ticketupdates" style="display:none;"> </div> It then contains PHP code like this: <?php $sql2=" SELECT ticket_seq, CONCAT(CONCAT(notes),'<br><br><a hr ...

phphtmlcss

Modifying the position of image fragments on the background

Currently, I am attempting to create a puzzle using a background image with numbered pieces that will eventually be movable through javascript. However, my progress has hit a snag as I am struggling to position the pieces correctly on the image. The HTML c ...

javascripthtmlcss

Improve the efficiency of retrieving contacts by optimizing cursor speed

When developing my app, I encountered an issue while fetching all contacts using a cursor. private static final String[] PROJECTION = new String[]{ PHONE_CONTACT_ID, DISPLAY_NAME, TIMESTAMP, HAS_PHONE_NUMBER}; CursorLoader ...

androidandroid-contactsandroid-cursorandroid-cursorloader

Adjustable positioning and size of dropdown menu (triggered by clicking)

Currently developing the following webpage: https://jsfiddle.net/t9f2ca4n/212/ Check the raw code at the bottom of the page. The issue at hand involves adding two buttons for each line item (Item I or Item II) to display setup details under "Cate ...

javascripthtmlcssdropdown

Endless cycle of TextWatchers functions in RecyclerView Adapter

Seeking a simple solution to convert integers into decimals and vice versa on a single element of RecyclerView, updating live with every user input. The issue arises when trying to call RecyclerView.Adapter.notifyItemChanged() inside TextWatcher.afterTextC ...

androidandroid-recyclerviewandroid-edittext

What is the best way to create a horizontal line within a ListView?

Is there a more efficient method for creating a black horizontal line other than setting a fixed height and black background in the layout? ...

androidandroid-listviewlistviewitem

Getting rid of the IE pseudo-element that shows up on the right edge of a password textbox

My form consists of two text boxes for username and password entry. While entering text in these boxes, I noticed that Internet Explorer (IE) has specific pseudo-elements for the Username and Password fields: Username textbox: <input class="form- ...

cssinternet-explorer-11pseudo-element

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

javascriptcssreactjs

Exploring the benefits of incorporating margin and padding variables in custom class Bootstrap 4 with Sass integration

Is there a way to make spacer variables more generic while using Bootstrap in a custom class? I have a class called .box and I would like to apply the pl-3 class from Bootstrap 4 without adding it directly in the HTML, but rather styling it in sass. I ai ...

htmlcsssassbootstrap-4padding

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

What steps can I take to improve the functionality of the slide navigation feature

I am currently working on implementing a sliding menu feature. The menu can slide open smoothly, however, I am encountering an issue when trying to close it by clicking on the 'x' button. let openNav = document.querySelector(".slideOpen"); ...

javascripthtmlcss

Tips for ensuring the footer always stays at the bottom of the page

I'm having an issue with keeping the footer pinned to the bottom of the page. I haven't applied any specific styles to the footer, just placed it at the end of the content. Everything looks great until there's a page with minimal content, ca ...

javascripthtmlcssbootstrap-4footer

Error: Type Error - 'style' is not defined in the Progress Bar Project

Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this l ...

javascripthtmlcssprogress-bartypeerror

Creating a Shadow Effect on CSS Triangles

I have created a unique design that resembles a large arrow pointing to the right. <div style=" font-size: 0px; line-height: 0%; width: 100px; border-bottom: 80px solid #8cb622; border-right: 62px solid #dadbdf; "></div> <div style=" font ...

css

Incorporate a share (contact) feature for WhatsApp and various messaging platforms on your website

Is there a way to include a share button on my website's page? I found that we can add a send SMS feature to mobile HTML pages using the following code: <a href="sms:?body=...">title</a> How can we implement this code for sharin ...

javascriptandroidhtml

Guide on making a dynamic table with HTML and CSS featuring square cells

Looking to design an 8x8 table using HTML and CSS, with the first column and row functioning as headers (ideally with header row height equal to header column width), and all table body cells being square. Shown below is the current HTML and CSS code: < ...

htmlcsshtml-table