The CSS property `touchmove pointer-events: none` appears to have a malfunction on Chrome for Android version 4.4 / ChromeView

For my project, I am utilizing CSS pointer-events to allow touchmove events to pass through a transparent div. This method has been effective on most platforms except for Chrome on Android. I am curious if this is a known issue with Chrome and if there are any potential solutions or workarounds available.

This compatibility issue also extends to ChromeView, which is utilized by Cordova on Android 4.4. While earlier versions of Cordova (and iOS) do not experience the problem, Chrome on older versions of Android still presents challenges.

In my application, I have implemented layered divs using the following CSS:

pointer-events: none

This configuration allows me to scroll or click on the lower div within the layout.

 ____________________
| top overlay div    |
|    _____________   |<-- pointer-events: none
|   | underneath  |  |
|   |   div is    |  |
|   | scrollable. |  |
|   |_____________|  |
|____________________|

In browsers other than ChromeView, the underneath div remains scrollable as intended.

However, in ChromeView browsers (such as Chrome and Cordova on Android 4.4), the underneath div becomes unscrollable. This is the issue that needs to be addressed.

You can view an example of this behavior here:

http://jsfiddle.net/TPkum/ or

Notice how the lower div is scrollable thanks to 'pointer-events: none'.

While this technique functions correctly on most devices (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), it encounters failures on my Cordova app running on Android 4.4 and previous versions of Chrome for Android.

I have attempted to re-dispatch touchmove events between the top and bottom divs, but this approach did not resolve the issue. Re-dispatching click or scroll events works fine, but not touchmove events.

Answer №1

The issue was resolved by implementing the solution found here:

Special thanks to user wulftone for the assistance! By preventing the default touchStart event on my overlay, I was able to allow the interaction to trigger events below.

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

Alternatively, in my case using jQuery:

$('.frame-overlay').on('touchstart', function(e){
  e.preventDefault();
});

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

Utilizing the transform: origin property to perfectly align an element

I've tilted a basic paragraph and I'm attempting to position it on the left side of the browser at 0% from the top of the browser at 50%. http://example.com p { position: fixed; -webkit-transform-origin: left center; -webkit-transfo ...

Revamping the purpose of a function found within an HTML <script> tag

index.html: <script id="change"> function methods(){ return 1; } </script> js.js: ... button.addEventListener("click", ()=>{ document.querySelector("#change").innerHTML = ` function ...

Chrome Selenium webdriver facing issues with HTTP url authentication

By simply entering the following URL directly into your browser, it functions as expected: http://username:p%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f7b7f3c3c38203d2b0f2a372e223f232a3c263b2a612c2022">[email pro ...

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

Extracting data from a dropdown list with beautifulsoup

Could someone please assist me in scraping a list of dates from: The dates can be found within a dropdown menu just above the option chain. I have experience scraping text from websites, but this specific text is utilizing 'select' & 'o ...

What is the process for loading the chosen option JSON object from an array when a button is clicked?

I have a TypeScript file containing JSON objects that can be selected as options from a dropdown list. I am looking for guidance on how to load/instantiate the selected JSON object when the user clicks a button to proceed. Specifically, I would like to le ...

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

Adding the AJAX response to the specified element's ID

I'm having trouble inserting radio buttons into a <div> on my page using an AJAX response. The code I have looks like this: // AJAX form for updating tests after category selection $('#categories').change(function(){ category_id ...

What is the best way to implement media queries for mobile phones and desktop computers?

I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...

An always-visible navigation menu

After exploring various resources related to the same topic, such as sticky navigation bars and others, I noticed that all the solutions provided involved the use of this link http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. However, inc ...

Obtaining a byte array using the file input method

var profileImage = fileInputInByteArray; $.ajax({ url: 'abc.com/', type: 'POST', dataType: 'json', data: { // Other data ProfileImage: profileimage // Other data }, success: { } }) // Code in Web ...

Python: Change text within HTML content rather than the HTML tags

Looking for help with converting HTML code? <pre class="script">template("main/GlobalShared");</pre> <pre class="script"> var link = '/Draft/Tracker_1.1'; if (wiki.pageexists(link)) { &lt;div class="version"&gt; web ...

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

Tips for setting up the information in a Bootstrap popover

I am currently working on a Google web app that involves Google Sheets data. My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display. What might I have done in ...

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

The printing feature in javascript does not include the ability to print values from textboxes

I'm encountering an issue when trying to print an HTML table with textboxes that should get their values from another function. However, the preview is not showing anything. Below is the complete code: <html> <head></head> < ...

What is the correct way to utilize CSS for setting a responsive background image for an element?

When I set the background-image for an <a>, it always requires specifying the width and height in the stylesheet file. This causes the URL image to not be responsive. I've tried solutions such as using background-size: cover; and background-colo ...