Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Encountering a problem with browsers (potentially Chrome) adding CSS rules on touch-enabled devices.

In a website developed for a client (specifically for Chrome), the scroll bars disappear on elements when accessed from their ultrabooks. The client still uses these devices as regular laptops, so removing scrolling is unnecessary. This issue seems to stem from the browser automatically adding the following CSS rules to certain elements due to the devices having touch screens:

overflow: hidden;
width: auto;

This results in the removal of scroll bars and disrupts site functionality as several elements become non-interactive.

Despite researching the matter, relevant information has been scarce (most search results pertain to wanting overflow:hidden on mobile). I had hoped there was a setting in Chrome to disable this behavior, but my efforts have been fruitless. While it is possible to forcibly add CSS rules, this may lead to further complications.

Your input on this matter would be greatly appreciated.

Thank you

Answer №1

I stumbled upon the solution.

To resolve this issue in Chrome, follow these steps:

1/3 of the way down on the chrome://flags page, locate the setting named ‘Enable touch events’.

Description in Chrome:

Enable touch events : Mac, Windows, Linux, Chrome OS

Choose to enable or disable touchscreen support, or automatically detect and enable it when a touchscreen is present (default setting). #touch-events

Set the drop-down selection to ‘Disabled’. Once selected, a button labeled ‘Relaunch Now’ will appear at the bottom of the window. Click on it to restart Chrome. Your scroll bars should now be visible.

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

Concealing a table row if a different row is devoid of content

In my table, I have dynamic rows that are either date rows or content rows. This allows me to display news items below the corresponding date row. <table class="channel-data"> <tbody> <?php $current_date = ""; while($programs=$ ...

How can I access the ng-template in a component?

How can I reference <ng-template #modal_Template> in my component.ts file? Previously, I triggered a modal using a button on my HTML file and included this code: <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)"> ...

Tips for detecting HTML updates using Python requests

My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: The blue background represents an image, with grey text boxes overlaid on top (one of which includes a form). The entire layout ...

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

Exploring the Differences: innerHTML versus appendChild for Loading Scripts

Struggling to dynamically load scripts onto the DOM? function addScript(fileName) { document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>` } addScript('message-interface') I prefer th ...

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

Another date selection option missing from the available choices

I stumbled upon this template: . I am facing an issue where the second div I added does not display the dates, months, and years when duplicated. Here's a snippet of the script: <div class="form-date"> <label for="birth_dat ...

Attempting to migrate a HTML website to WordPress has proven to be a challenge as only the content is visible, with the CSS failing to load properly

I'm looking to convert an HTML site into a WordPress site while keeping the same theme intact. Even after adding 'wp_enqueue_style' to the functions.php file, the CSS file is not being recognized by WordPress. functions.php <?php f ...

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

When hovering over it, an element within an li tag appears larger than its parent element

I'm currently working on a project for my school classes and running into an issue with CSS. I'm trying to enclose everything in boxes, but it's proving to be quite challenging. The main problem I'm facing is that when I hover over the ...

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

I'm in the process of linking two projects, one using reactJS and the other NodeJS. Currently, NodeJS is running smoothly on localhost:3000. Next, I want to call a React application which redirects to port localhost:3001. How can I seamlessly connect ...

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

Is it possible to convert a blob to an image file using the FileReader in HTML

client side code <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; fun ...

Tips for stopping variables from leaking in JavaScript

I'm currently working on a JavaScript code for my task manager website. Each page has its own JS file, but I've noticed that the data saved in one file seems to leak over to the others. How can I contain these variables so that tasks don't s ...

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

Aligning text and lists using Bootstrap on both desktop and mobile devices

I want to format a text with a list similar to the images provided https://i.stack.imgur.com/6giDH.png for desktop and tablet view, but for mobile display I would like it to look like this https://i.stack.imgur.com/7zSXi.png This is my current approach ...

How can you override the selected classes for menu items in Material-UI using React.js?

Hey there! I'm facing an issue where I can't override the class that displays the correct styling when a menuItem is selected. Below is my code: <MenuItem component={Link} to="/Acceuil" className={{root:classes.menuItem ,selected:cla ...

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" value="ابدأ الان&qu ...