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

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

javascripthtmlcss

Is there a way to exclusively utilize CSS in order to achieve bottom alignment for this btn-group?

I currently have a series of div elements that I transformed into two columns. https://i.stack.imgur.com/xG7zT.png My goal is to align the PDF/XML button group at the bottom, creating a layout like this: https://i.stack.imgur.com/ijtuH.png This is an e ...

htmlcss

The div element with the id "wrapper" is not functioning properly within the box model

I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...

javascriptjqueryhtmlcss

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

javascripthtmlcssmedia-queriessidebar

Loading Fragments with Android's AsyncTask

I am currently working on implementing a JSON-populated listview in an Android fragment. The app crashes while running the AsyncTask portion, and I'm having trouble understanding the cause of the issue. I am following a tutorial that was originally in ...

javaandroidjsonandroid-fragmentsandroid-asynctask

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

javascriptcssreactjsnext.jsfade

The iPad screen displays the image in a rotated position while it remains

Recently, I developed a mini test website that enables users to upload pictures and immediately see them without navigating back to the server. It seemed quite simple at first. $('input').on('change', function () { var file = this. ...

javascripthtmlcssipadsafari

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...

css

bootstrap3 container alignment

I encountered a challenge while attempting to right-align multiple Bootstrap 3 containers in a straightforward manner. Despite my efforts, achieving this proved to be more complex than expected. In essence, I faced an issue where aligning the text box with ...

csstwitter-bootstrap-3

"TailwindCSS opts for the inclusion of prefexied utilities instead of relying

Trying to set the height of the div to h-2, with a class that includes height animation on medium devices. The issue is that even though h-2 should be used on mobile, tailwindcss still uses h-20 instead. Any thoughts on why this may be happening? Here i ...

cssreactjsnext.jstailwind-css

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Error: ionic serve is unable to locate the 'reflect-metadata' module

I am new to Ionic2 and following the steps: $ npm install -g ionic cordova $ ionic start cutePuppyPics --v2 $ cd cutePuppyPics $ ionic serve However, I encountered an error: "Cannot find module 'reflect-metadata' $ ionic info Cordova CLI: 6.5 ...

cordovaangularnpmionic2

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap

What is the best location for storing css files in Laravel?

I've come to realize that I can easily make changes to the app.scss file in my Laravel projects and see those changes reflected by running npm run dev or npm run watch. However, I'm faced with a dilemma when dealing with multiple .css files. Whe ...

csslaravel

I am unable to switch my carousel to full-screen mode

I'm struggling to make the carousel fullscreen even though I've set the width to 100%. Bootstrap was used in this project. Any help would be appreciated. Thank you! <html> <head> <link href="homepage.cs ...

htmlcss

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...

htmlcssopera

Having trouble with updating to the most recent version of cordova-ios

My mobile application, developed using Ionic and Cordova, is encountering issues with the GoogleMaps plugin version 2.6.2 on iOS for the past month, while it continues to function properly on Android. I recently inherited this project from a colleague and ...

google-mapscordovaionic-frameworknpmcordova-ios

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons