CSS animation/transition delay on hover on macOS Chrome

[CharlieDigital]

What happened?

CSS animation/transitions on hover for Chrome on macOS have a noticeable delay which causes an abrupt color transition instead of the smooth transition.

This is observable on any element which has a hover transition such as:

• q-button
• q-item with clickable

The recording below shows what this looks like in the latest Chrome on macOS:

https://user-images.githubusercontent.com/779970/178984316-68dd95ae-bc05-4f8c-9e54-9d570f0e5050.mp4

Also occurs in safe mode (extensions disabled).

Occurs in the sample layouts:

https://user-images.githubusercontent.com/779970/179006150-2848df94-486a-4ccb-91ef-5d08a9638f63.mp4

Does not occur on the actual Quasar docs though:

https://user-images.githubusercontent.com/779970/178998170-20cb7863-15b9-4c68-8713-116635ce3da7.mp4

I've isolated it to a particular CSS transition:

https://user-images.githubusercontent.com/779970/179008471-0dbacd92-f183-4013-9217-6f397176b4d1.mp4

What did you expect to happen?

In FireFox and Safari on macOS, this does not occur and the code behaves as expected:

https://user-images.githubusercontent.com/779970/178984447-40a569b8-4740-4e01-8bfd-795c92ce8b18.mp4

Furthermore, when turning on the performance profiler of the devtools in Chrome, the problem goes away:

https://user-images.githubusercontent.com/779970/178984735-5dc71220-199e-4c9c-a62c-01e9af691184.mp4

I don't have a recording, but I also tested the pen with Chrome on Windows and can confirm that behavior is as expected on Windows.

Reproduction URL

https://codepen.io/charliedigital/pen/OJvbWxm

How to reproduce?

1. In macOS, open Chrome
2. Click on the repro link
3. Hover over the Notify button and Hello World list items
4. Observe the animation delay
5. Open the devtools and start profiling
6. Observe that the problem is resolved
7. Open Firefox or Safari
8. Observe that the hover animation behaves correctly

This also occurs with local projects created via Quasar CLI.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(21.5.0) - darwin/x64
NodeJs - 14.19.0

Global packages
  NPM - 8.12.2
  yarn - 1.22.17
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.14.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.2
  pinia - 2.0.16 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.13 -- Native-ESM powered web dev build tool
  eslint - 8.19.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - mbp14.local
  en0 - 192.168.1.10

Relevant log output

No response

Additional context

No response

[maxcelos]

Getting same behavior.

Had to override the css:

body.desktop .q-focus-helper
    transition: none !important
  
body.desktop .q-focus-helper:before, body.desktop .q-focus-helper:after
    transition: none !important

[BoBo-Git]

This problem has existed since the previous version, I hope the official team can investigate it as soon as possible.

[nrankovic]

This seems to be resolved by updating to latest browser version. My current version of Chromium is 104.0.5112.79, and it works as expected.

[CharlieDigital]

@nrankovic what's interesting to me is that it seemed to work fine on the quasar.dev page.

Can also confirm that this is now working as expected in the latest macOS Chrome; closing.