Experiencing a scroll problem in the latest version of Google Chrome for Android while using ReactJS? The issue seems to have migrated from the earlier version 99.xxxxxx to

Previously, my website was functioning perfectly in full screen mode. However, after updating Chrome on Android to the latest version (116.xxxxxx....), I noticed that it is now displaying a scrolling behavior that was not present in the earlier version (99.xxxxxx...).

I have tried various CSS solutions like the ones below.

html, body {
    scroll-behavior: smooth;
    overflow-x: hidden!important;
}

AND

html {
        scroll-behavior: smooth;
        overflow-x: hidden!important;
}
body {overflow-x: hidden;}

Has anyone encountered this issue before and have any ideas for a solution?

javascriptandroidcssreactjsgoogle-chrome

Answer №1

After much searching, I finally discovered the solution,

The issue stemmed from the new resize behavior in Google Chrome on Android.

To fix this problem, you need to include the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

in your index.html file.

If you have used

position:fixed

in your web layout, you must prepare your application for the newest resize behavior in Chrome on Android.

For more information, check out this reference: https://developer.chrome.com/blog/viewport-resize-behavior/

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

Tips for Implementing Show and Hide Functionality in JavaScript

I have a piece of cshtml code similar to the following: <span class="p1"> Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book authored by Rajiv Malhotra and Aravindan Neelakandan, arguing ...

javascriptc#htmlcssasp.net

"Regrettably, the app has encountered a problem with the Google Maps API v

This is my log file 04-01 17:21:32.460: E/dalvikvm(296): Could not locate class 'android.app.Notification$Builder', mentioned in method com.google.android.gms.common.GooglePlayServicesUtil.zza 04-01 17:21:32.470: E/dalvikvm(296): Could not find ...

androidgoogle-maps-android-api-2

Organizing ReactJS Components: Best Practices for Folder Structure

Is it possible to store the containers-folder outside of the components-folder? Should the common-folder and helpers-folder be kept inside the component-folder instead? What is the recommended arrangement for the following folders within the components-f ...

reactjs

I am struggling to understand why the cards in my tremor project using next.js are not refreshing the frontend display

I am currently working on developing my Next.js application with Tremor. However, when I view my page on localhost, it doesn't seem to be rendering as I expected. Below is my page.tsx file: 'use client' import { Card, Text, Subtitle } f ...

reactjsnext.js

Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening? I am trying to make sure that th ...

htmlcss

Specify the data type of a nested object in a React component with TypeScript

Interface Button{ buttonTitle: { name?: string; } } What is the best way to specify a type for the buttonTitle property? ...

javascriptnode.jstypescript

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

Converting a String to a JSON Array in NodeJS

Here's a question that bears resemblance to string-to-json-array-of-json-objects. The scenario involves the following string: "[{'Phonetype':'Pre','Phone':'918282311'},{'Phonetype':'pre',&ap ...

javascriptnode.js

What are some ways I can customize the appearance of this Google Maps infoWindow?

I was able to create a Google Maps script using JavaScript code. The map displays multiple locations with corresponding latitude and longitude coordinates. This script can be viewed at . My objective now is to customize the appearance of the info windows ...

javascriptgoogle-maps-api-3

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

How should I fix the error message "TypeError encountered while attempting to import OrbitControls"?

Encountering error while attempting to import OrbitControls JS: import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...

javascriptimportthree.jsorbitcontrols

Adjust the appearance of a specific element

When it comes to styling my HTML tags, I prefer a definitive approach. However, there is one particular tag that I want to exempt from this style choice. Is there a way to achieve this? ...

htmlcss

How to display the Tab Bar within a React Native component class when there are no active tabs

When the application launches, there is an initial screen with 5 tabs displayed. However, none of the tabs are currently selected. The screen and the tabs have their own unique user interfaces. ...

reactjsreact-native

Unusual outcome observed when inputting a random number into HTML using JavaScript

In my HTML file, I am trying to input a number within 50% of a target level into the "Attribute" field. Here is the code: <!DOCTYPE html> <html> <body> <input type = "number" name = "playerLevel" onchan ...

javascripthtmlrandom

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

htmlcss

Understanding the extent of testing coverage in a project using karma and webpack

For my project, I am incorporating ES6 syntax and testing my code with Karma. While I have successfully set up testing, I encountered an issue with the coverage report. Instead of including the source code, the coverage report is highlighting spec file ...

javascriptwebpackkarma-runnercode-coverage

Encountering an issue with importing createSagaMiddleware from 'redux-saga' while working on my create-react-app project

Within my create-react-app, I have the following import: import createSagaMiddleware from 'redux-saga'; However, there seems to be an issue with importing createSagaMiddleware in my system. The versions I am currently using are: node 12.13.0 n ...

javascriptreactjsreduxcreate-react-appredux-saga

Error in TypeScript React: "Could not locate module: Unable to locate 'styled-components'"

Even though I have installed the @types/styled-components package and compiled my Typescript React app, I am consistently encountering this error: Module not found: Can't resolve 'styled-components' I have double-checked that 'style ...

reactjstypescriptnpmstyled-components

Is there a way to connect an HTML page without using a hyperlink?

Is there a way to directly display linked HTML pages on my webpage instead of just creating a link? I'm looking for suggestions on how to arrange this. Thank you! ...

javascriptjavahtmlcss

Unable to reach subdirectories on Nginx and React router while using a proxy server

I have set up an nginx server with a local web app running on port 4000. I managed to configure the Nginx rules for it to be accessible through a proxy, but now I can only access the website through the main URL, such as "https://app.domain.com" (which wor ...

reactjsnginxreact-routerreverse-proxynginx-reverse-proxy