Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on older versions of Chromium and even on Internet Explorer.

One specific issue is with the sidebar elements on my website. Here is the HTML for the sidebar:

<div id="sidebar">
    <h1 class="special-fx-opacity invisible">CONSTRUCTION REALIZATIONS</h1>
    <div class="sidebar-el">
        <h2 onclick="location.href = '[censored]';" class="special-fx-opacity invisible">Novus&Mediucs Clinic, Oslo</h2>
    </div>
    ...

Additionally, here are the styles for these elements which are supposed to change color on hover:

.sidebar-el h2{
    text-align: center;
    cursor: pointer;
    font-family: "Montserrat";
    color: #808080;
    line-height: 1.3em;
    font-size: 1.2em;
    font-weight: 200;
    transition-duration: 0.3s;
    z-index: 3;

}

.sidebar-el h2:hover{
    color: #cd1120;
}

Despite trying to fix the issue by adding z-index, the problem persists only in the updated Chrome version. The website also includes some simple jQuery functions for scroll offset tracking, which seem to work fine. However, this could be related to the CSS transition problem, as the effects work perfectly on other browsers, including old versions of Chrome.

...

If you happen to have any insights on how to resolve this issue, I would greatly appreciate it!

javascriptjqueryhtmlcssgoogle-chrome

Answer №1

If you're looking to change the color on hover, consider using the following CSS:

.sidebar-el>h2:hover{
color: #cd1120;
}

Alternatively, you can simplify it to just:

h2:hover{
color:#cd1120;
}

In case the above solutions don't work for you, another option is to utilize jQuery for the hover effect, like so:

$("h2").hover(function(){
$(this).css("color", "#cd1120");
}, function(){
$(this).css("color", "#808080");
});

Answer №2

Unexpectedly, a supernatural influence has been identified within the intricate workings of CSS...

Upon creating a slideshow script (visible on the gifs), I discovered that altering the width of displayed photos triggered changes in the layout style, resulting in lag. This intriguing issue was eloquently explained in a recent outstanding article I came across while perusing developer blogs. It dawned on me as I scrutinized my JS for faults. (special thanks to the author José Rosário, as this revelation is relatively obscure and enlightening)

After conducting various tests, it became evident that during the animation process, the transition of the width style occurs in the Layout rendering phase, causing delays in rendering box-shadow, color, and other styles in the Painting phase. These layout adjustments were occurring at regular intervals, approximately every 1.5 seconds, with the animation lasting about 0.8 seconds.

Despite the visually appealing effect, I am inclined to redesign the entire setup utilizing cutting-edge Composite styles, known for their efficiency in preventing delays in style changes rendered during the Painting phase. Additionally, incorporating revolutionary GPU-rendering technology, as detailed in the aforementioned article if time permits (launching the website today).

A massive shoutout once again to the article's author, a must-read for individuals engaged in advanced front-end development. This information had never crossed my path until I stumbled upon the article by chance... https://i.sstatic.net/CDSMZ.png The sequence of style rendering in web browsers

EDIT: Opting against reinventing the wheel, I swiftly created something remarkably similar using glide.js, integrating all the sophisticated tactics outlined above

EDIT#2: (for transparency) Upon observing slight stuttering in the slideshow, it appears that glide.js may not implement ALL the techniques from the article, particularly regarding GPU rendering for smoother animations, albeit the impact is minimal

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

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Having some trouble creating an input field in my component alongside a mat-toolbar element. When I try to insert a mat-form-field, it ends up messing with the styling of the mat-toolbar. I've been unable to pinpoint exactly where the issue lies (if ...

cssangularangular-material

Move the div containing an <audio></audio> tag

Is it possible to drag a div with a width of 200px and an element into a droppable area, and once the div is dropped, have its size change according to the sound duration (e.g. 1px per second)? Check out this example on jsFiddle. Below is the code snipp ...

javascriptjquery

Utilizing jQuery for easy drag-and-drop functionality in web development

I have two lists which are currently using jQuery for functionality. An example can be found here. I need the same basic functionality but with some modifications: Instead of just getting all sortable items by clicking "Get items," I want to be able to dr ...

javascriptjqueryhtmlcssdrag-and-drop

Displaying Data in React Table from JavaScript Object

I'm working on a React component that will display a table of data from a JavaScript object called pixarMovies. The initial state is set with this object. My goal is to sort the movies chronologically by date and render them in a table format (refer t ...

javascriptreactjsecmascript-6react-reduxjsx

Is it possible to select options in AngularJS based on certain criteria?

I created an AngularJS select menu that is currently functioning correctly: <select name="s1" id="s1" multiple="multiple" data-native-menu="false" data-role="none" ng-model="userlistSelect" ng-options="u.userId as u.fi ...

javascriptangularjs

The briefest series to equate a mathematical expression with a specific target value

While studying eloquent JavaScript, I encountered a program that checks whether any combination of multiplying 3 and adding 5 produces the target value: However, this function does not provide the shortest possible sequence for achieving the target value. ...

javascriptrecursion

Implementing Jquery Ajax pagination with dynamic content loading

As a newcomer to ajax and jquery, I am currently working on building a search page that will contain numerous records and therefore needs to be paged. While researching tutorials on how to accomplish this task, most examples I found included page numbers d ...

jqueryajaxpagination

Dealing with a surprise JSON error in Express.js using Javascript

Dealing with Unexpected JSON in my express js application using try and catch. I attempted to achieve this as follows: try{ let body = JSON.parse(req.body); }catch(e){ res.json({ error:e }) } However, the Unexpected JSON error is not caught in ...

javascriptjsonnode.jsexpress

Setting the height to 100% on the body and html tags can lead to scrolling problems

After implementing the CSS code below, I have encountered some unexpected behavior: body, html{height:100%; overflow-x:hidden} Despite vertical scrollbars appearing as intended when the page exceeds screen height, detecting the scroll event on the body e ...

javascriptcss

Struggling with implementing the group by feature in AngularJS?

Currently, I am trying to group a select-window by 2 different object arrays - subcategories and rootcategories. Each subcategory has a relation id that links to the rootcategory's id. My goal is to have the dropdown window group the subcategories bas ...

javascripthtmlangularjs

The expiration time and date for Express Session are being inaccurately configured

I'm experiencing an issue with my express session configuration. I have set the maxAge to be 1 hour from the current time. app.use( session({ secret: 'ASecretValue', saveUninitialized: false, resave: false, cookie: { secure ...

javascriptnode.jsmongodbexpress

What is the name of this JavaScript function declaration syntax? (var) => {}

While perusing the most recent NodeJS documentation, I stumbled upon a novel approach to defining a function: fs.unlink('/tmp/hello', (err) => { if (err) throw err; console.log('successfully deleted /tmp/hello'); }); Source: ht ...

javascriptnode.js

Determine the total cost based on the quantity purchased

I created a webpage for employees to select an item from a dropdown menu, and it will automatically display the price of that item. Check out my code below: <script> $(document).ready(function() { $('#price_input').on('change' ...

javascriptjqueryhtml

Improve the parallax effect in your React component

Do you have any tips on smoothing out the scrolling animation for a React component with a simple parallax effect? I tried using requestAnimationFrame() in vanilla JS, but it doesn't seem to work well within the React component's rendering cycle. ...

javascriptcssreactjs

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

Is there a way to have a div with an opacity of 40%, but make the text inside the div show with an opacity of 100%? #box { Background-color:#000; Opacity:40%; } ...

htmlcss

The JSON response appears to be jumbled when making a jQuery Ajax request

My PHP script contains the following line: echo json_encode(array('success'=>'true','userid'=>$userid, 'data' => $array)); The output is as follows: { "success": "true", "userid": "1", "data": [ { ...

phpjqueryajaxjsonapi

What is the correct way to shut down a Node.js Express server?

Upon receiving a callback from the /auth/github/callback URL, I am faced with the task of closing the server. Utilizing the standard HTTP API, the server can be closed using the server.close([callback]) API function. However, when working with a node-expre ...

javascriptnode.jsexpresswebserver

Building Dynamic Props in Vue.js using v-select Component

I am utilizing a chart that relies on properties for data. <template> <v-row> <v-col col="12" sm="12"> <Chart :data="series2"></Chart> ### This chart receives the props < ...

javascriptvue.jsvue-props

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

http://jsfiddle.net/vmKVS/ I need some help understanding the functionality of slideToggle using a small example. After toggling for the first time, the options element changes color to green. However, I expected the menu element to turn red when I togg ...

javascriptjqueryhtmlcssslidetoggle

The Angular frontend appears to be experiencing difficulties displaying content on the website

I'm currently working through the AngularJS on Rails tutorial from Thinkster(). Check out my progress so far https://jsfiddle.net/dcbavw4e/ I'm not seeing anything on the web page. I've already installed node.js and npm. Are there any othe ...

javascriptangularjsnode.js