Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle.

The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug?

Are there alternative methods for implementing this scenario with a scrollable div and different CSS rules?

FIDDLE: https://jsfiddle.net/cs84mobe/9/

html

<div class="one">
    <div class="two">
        <div class="three">
           lots of content .....       
        </div>
    </div>
</div>

CSS

div {
    border: 1px solid black;
    padding: 10px
}

.three {
    height: 100px;
    overflow: auto;
}

I've searched through other related Stack Overflow queries but unfortunately none have provided a solution.

Answer №1

It seems like a documented problem:

Issue 444766: Lose all ability to left/middle click after middle-button scrolling in certain websites.

Steps to replicate the issue:

  1. Go to google+, hangouts.
  2. Select an existing conversation (ensure there's a scroll bar available within the conversation & main scroll bar grayed out).
  3. Use the middle mouse button to click-scroll inside.

Expected behavior:

Content should scroll smoothly.

What is going wrong?

The current tab becomes unresponsive to ALL mouse clicks. Hovering still works, the page isn't frozen, but there is no way to interact with anything using any of the mouse buttons.

There could be other ways to trigger this issue as well.

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

Preventing users from copying and pasting information from my form by implementing javascript restrictions

I'm looking for a solution to prevent users from copying and pasting in my form using JavaScript. I want to restrict the ability to paste or copy any content into the form. Any assistance would be greatly appreciated! ...

As the user types, automatically format the input field for a seamless and intuitive experience

My current application is running on Angular 1.3.10 I have implemented a jQuery function to automatically add a backslash to the expiration input field once the user types the third number. Although it was a quick fix, I now aim to move this functionality ...

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

Convert a relative path to an absolute path using the file:// protocol

When I scrape a website with similar html content, I come across the following code: <a href="/pages/1></a> In addition to this, I have access to the window.location object which contains: origin:"http://www.example.org" This allows me to ...

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

I am implementing a code in the middleware.ts file to redirect users to specific pages based on their role. Here is the code snippet: import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { get ...

Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

When importing modules in node.js, the presence of a function can overwrite another function even if it

Within this code snippet, I am utilizing Express.js. //index.js app.use('/',routes()); //app/routes.js module.exports = function() { express = require('express'); const loggedUserProfileController = require('../controller ...

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

A tutorial on converting a tree structure into a JSON object using jQuery

Struggling to create a JSON object from the tree class, specifically needing only the span values. The structure of the tree is dynamic and nested, so utilizing a recursive function seems like the most suitable approach. Currently able to extract the keys ...

Using Styled Components to Implement Background Images in a React Application

I'm currently attempting to pass a background image using a prop, but I'm encountering an issue where it's indicating that url is undefined. const CardImage = styled.div` height: auto; width: 100%; background-size: c ...

What could be causing the issue of receiving the error message: "Uncaught TypeError: Cannot read property 'Title' of undefined"?

I am currently working on developing an AJAX web application. One of the functions I have is aimed at requesting a JSON object and then utilizing it to refresh the website content. Below is the portion of JavaScript causing an issue (Lines 8 - 16): windo ...

Tomcat encounters difficulty accessing the JavaScript directory

Seeking assistance with my first question regarding Angular tutorials. When I deploy to test the script, I encounter an HTTP 404 error. I have tried various solutions suggested for similar issues without success. It appears to be a path problem as the ang ...

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS. The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops. Here's the code I've be ...

What is the appropriate method to call a function when a parameter is unnecessary?

Just to confirm, is this the correct way to call a function when a parameter is not needed? function load_img(src, alt, el, other_src) { // check if other_src exists, not null, defined, not empty, etc... } //call the function load_img(src, alt, '# ...

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

Retrieving the class ID when clicked

In my PHP while loop, I am generating multiple classes to display information (such as user posts) along with two buttons at the bottom of each post. One button increments and the other decrements a numerical value. I am trying to figure out how to retri ...

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Hey there! I could really use some help with a tricky situation I'm facing in my React Native app, specifically regarding camera integration. Here's the scoop: The Issue: I'm working on a video recording application using React Native that ...

Carousel-Owl, glide through two items simultaneously

I am currently in the process of developing a slider using the beta version of Owl-Carousel 2, but I am encountering several issues. My goal is to configure the owlCarousel to function as follows: It should scroll through 2 items at a time while displayin ...

Ways to forward a parameter to a different web address?

Is there a way to properly redirect a parameter such as http://example.com/?link=https://google.com to its destination at ? ...