Newer Chrome browsers have a bug with CSS Hover functionality on scrollable elements

I am currently using a fiddle for my project

Check it out here

This fiddle includes a simple hover trigger to display the content

ul li:hover > ul
{
    display:block
}

When hovering, a dropdown menu appears and if there are many items, a scrollbar shows up.

Everything works smoothly on IE and Firefox. However, I have noticed an issue with Chrome - when you try to scroll over the scrollbar, it interrupts the hover state. This seems to be a problem in recent Chrome versions, as Chrome 55 behaves correctly but Chrome 56.0 (.2924) has this glitch.

I prefer not to use JS to fix this, so I'm looking for a CSS solution for all management tasks.

If anyone can help identify why the hover state is not being properly recognized, I would appreciate it!

Thanks

htmlcssgoogle-chrome

Answer №1

A concerning issue has been reported in Chrome 56 - when hovering over a scrollbar, it fails to trigger a hover event for that specific element. Thankfully, this bug is set to be resolved in the upcoming release of Chrome 57. Stay updated on the progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=686678

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

Error with column arrangement: absolute-positioned elements are displaying in the incorrect column

I'm currently trying to implement masonry layout using the CSS property column-count. While I am aware that there are simpler solutions involving creating multiple columns for the masonry structure, the complexity of my project built on PHP Laravel li ...

htmlcssbootstrap-4

Does the 'a' HTML tag secretly trigger window.location.assign?

Being relatively new to the online world, I have a simple question in mind. Imagine that I have a very basic a tag in my HTML: <a href="www.google.com"> Click me </a> What actually happens when I click on this link? Does the browser simply ...

javascripthtmldomhyperlink

A guide on showcasing the compilation results of PHP code directly on the web browser

How can I compile PHP code on an HTML Button click and display the compilation output in a browser? The code snippet below works well in the terminal but doesn't show anything in the browser. I am currently using XAMPP server on a Windows machine. &l ...

phphtmlxampp

Could we potentially implement a dropdown menu that spans the full width of the screen while still being contained within a wrapper set to a width of 1024

I have a query - can I create a full-width dropdown menu within a wrapper that has a width of 1024px (with contents centered on the screen)? My dropdown menu is causing some issues. Although the hover effect is not functioning yet, I am still working on st ...

htmlcss

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

Should ng-binding be avoided in CSS selectors as a general rule?

Recently, I stumbled upon this code snippet in our codebase: li.ng-binding span { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } The selector above doesn't actually apply to one of the intended 'li& ...

cssangularjs

Utilizing an image source for the Navbar logo

My Bootstrap v4.5.0 navbar is giving me trouble. I am trying to use a logo as the navbar brand, treating it like HTML text. However, I can't seem to replicate it successfully. Despite having other items in my navbar besides just the brand, the image i ...

cssimagebootstrap-4navbar

Display a loading screen while transitioning between routes in Angular 2

Is there a way to implement a loading screen for route changes in Angular 2? ...

htmlcssangularangular2-routing

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

Hey there! I recently created a Wordpress site and it seems that the Art Below logo isn't appearing in IE7, IE8, and Android for some reason. Would anyone be willing to help troubleshoot this issue? If you have fresh eyes, please take a look at the f ...

htmlcsswordpress

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...

javascriptjquerycsshtmltwitter-bootstrap

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

javascripthtmlcssgraphgoogle-visualization

Divs are piling up on one another, but they're not in the correct sequence

Currently, I have two divs placed side by side and utilizing a media query to stack them. However, my goal is to have the yellow div on top with the blue div below it once the script is executed. Unfortunately, I am unsure of how to achieve this. #wra ...

htmlcssmedia-queries

How can I extract and display chosen values from multiple dropdown menus in designated text boxes based on their unique identifiers?

A website for evaluating car values is in the works, using a combination of PHP, MYSQL, JQUERY, and JavaScript. The database includes 3 tables: Table "car_make": id make 1 BMW Table "model": model_id model_name make_id 1 M3 1 Table "ca ...

javascriptphpjqueryhtml

Angular Kendo DatePicker: Pick a Month and Day, Excluding the Year

Is there a way to remove the year from the Angular Telerik DatePicker component? I have tried the solution provided in this forum post but it's not working as expected. I am currently attempting to implement the following code in the HTML and hide th ...

htmlangularkendo-uitelerikangular8

Utilizing Bootstrap datepicker to set maximum and minimum dates based on another date input

I have been attempting to create a restriction on the date selection, where datepicker1 cannot exceed datepicker2, and vice versa. Initially, I tried implementing this feature using (Linked Pickers). Unfortunately, this did not achieve the desired date in ...

jqueryhtmltwitter-bootstrap

Troubleshooting a responsive design problem with iosSlider CSS configuration

After downloading the iosSlider demo, I decided to make some modifications to one of the examples provided. To access iosSlider, visit . Click on the big red button to download the demo. The specific index.html file I am trying to edit can be found in th ...

htmlcssimageresponsive-design

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

javascriptjqueryhtmlajaxjsp

Combining jQuery within a single container/segment/div tag

Currently, I am experimenting with adding jQuery to my Cargo Collective website: I have been working on a mouse-tracking jQuery effect that I really like, but I am facing an issue where the script does not stay contained in a specific section of the site. ...

htmljquerycssresponsive

Expand the table in the initial state by using CSS to collapse the tree

I am struggling to collapse the tree view and need assistance. Below is the code snippet I've added. My goal is to have each node in the tree view initially collapsed and then expand a particular node on user interaction. For example, when I execute ...

javascriptjquerycss