Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everything appears to be working well without any problems.

iOS 5 - iPad, iPhone.

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 - Asus Transformer Tab.

However, during testing on the Android Stock browser of the Samsung Galaxy Note 800 with version 4.1.2, we encountered an unusual issue. The elements within a div (referred to as a child div) with the CSS attribute 'overflow:auto' were unresponsive to touch events when scrolling was enabled. It's important to note that the parent div containing this div is positioned absolutely with 'position:absolute'. After researching online, we discovered that the combination of absolute positioning and overflow attributes can sometimes cause issues on the Android browser.

Unfortunately, removing the absolute positioning isn't feasible at the moment as it would require a complete redesign of the layouts, and we are nearing our release deadline. Are there any quick fixes or suggestions that anyone can provide to resolve this issue?

androidcsscordova

Answer №1

To handle overflow in your design, consider using the properties overflow-x and/or overflow-y.

For example:

overflow-y: scroll; /* enables vertical scrolling */
-webkit-overflow-scrolling: touch; /* adds momentum scrolling on Webkit browsers */

In addition, when dealing with touch devices where scrollbars are hidden, you can utilize :scroll instead of :auto to achieve a similar look without potential bugs.

Answer №2

It's funny how simply adding -webkit-backface-visibility: hidden; to your CSS can solve the issue

Answer №3

The challenge with using overflow: auto in the Android browser has been a longstanding issue that dates back to 2009, as documented in this report. Despite being marked obsolete, users continue to encounter problems with it not functioning properly. Given that Chrome is now the standard Android browser, there may be little motivation for further efforts to resolve this issue.

Answer №4

If you're looking to incorporate smooth scrolling functionality into your website, consider using the JavaScript library known as "iScroll". It has been designed to be compatible with most Android devices and is relatively easy to integrate. To get started, simply add the following line of code below your div element: 

var scrollDiv = new iScroll('divId');
. For more information and access to the project page, visit:

Answer №5

Have you considered encapsulating the elements within an absolutely positioned container inside a new div and giving it a relative position?

<div class="absolutelyPositionedWrapper">
    <div class="relativelyPositionedItem"></div>
</div>

<style>.relativelyPositionedItem{position:relative;overflow:auto;}</style>

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

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

What are the steps to ensure HTML5 video fills the entire height and width of the browser window?

Is there a way to make a video fill the entire width and height of the browser on first page load using bootstrap? I am currently facing some issues with achieving this. The code that I have been using seems to work, but the height ends up being more than ...

jqueryhtmlcsshtml5-video

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

htmlcssjsp

Getting information from Android JSON and sending it to PHP backend

I am facing an issue with my App where it sends the username and password to a PHP file using JSON format. The PHP file reads the user columns and status from the database. However, I have included all the necessary code in the PHP file to read the JSON da ...

phpandroiddatabasejsonandroid-asynctask

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

Adjusting the height of the Sencha Touch container to accommodate its content

In Sencha Touch, I have a view that generates a popup box from the right when a button in the bottom toolbar is clicked: Ext.define('TheApp.view.PopupTablet',{ extend: 'Ext.form.Panel', xtype: 'popupbox', confi ...

javascriptcssheightsencha-touch-2

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

FlexBox responsive items that are expandable getting cut off

I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with: On Desktop, the items are cut off and not fully visible. On Mobile, half of the items are missin ...

htmlcssreactjsflexboxtailwind-css

Tips for repositioning my sidebar using CSS and HTML

I'm a beginner in CSS and HTML and I'm struggling to make my sidebar move to the side on my website. I have divided my site into three div areas: one for the 'sidebar', one for the 'main content', and one for both called &apos ...

htmlcsssidebar

Modify the appearance of the button

Currently, I have a setup where I have three buttons and three panels. When I click on Button 1, Panel 1 loads while Panel 2 and Panel 3 become invisible. Similarly, when I click on Button 2, Panel 2 loads while Panel 1 and Panel 3 are hidden. I would li ...

jqueryasp.netcss

Can someone explain the purpose of `svg:not(:root) {overflow: hidden}` in simple

I am facing an issue with displaying my .svg file in my next-js project. It seems that the CSS code svg:not(:root) { overflow: hidden; } is causing the problem. Could someone explain what this particular CSS rule is for? After changing the code to svg:no ...

cssreactjssvg

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

"Users" within the Realm IO app

Currently, I am working on developing a social Android app where users can interact with each other. Each user will have specific values such as name, profile picture, location, etc. I have come across Realm Object Server and its concept of a user, but I ...

javaandroidiosdatabase-designrealm

Tips for manipulating fixed elements while navigating through the window's content

I am currently working with Materialize CSS (link) and I'm trying to figure out how to move select content while scrolling the page or when the window is scrolling. However, the example code I've implemented doesn't seem to be working. Is th ...

javascriptjqueryhtmlcssmaterialize

What are the steps to create a custom progress bar using JavaScript?

I have experience with HTML and CSS. Below is the HTML code: <div id="wrapper"> <ul id="top"> <center><li><a href="#one" class="button">GENERATE</a></li></center> </ul> <div class="box" i ...

javascripthtmlcss

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

Encountered an issue while attempting to parse the native JSON Data

Attempting to revive an old project using Android Studio is proving to be a challenge. The process consistently fails, accompanied by the following error message: Error:Failed to read native JSON data Use JsonReader.setLenient(true) to accept malforme ...

androidjsonreact-nativegradle

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

javascriptcssreactjsreact-nativebutton