Chrome Animations Flicker Bug

Design help General
1

Hey Folks,

I’m seeing a behaviour i’ve not seen before when elements disapear from the page when the cursor moves out of the window and up to the page tabs. Sometimes they just flicker and other times they are gone and only reappear again when I scroll. This only happens on Chrome as far as I can tell and is defo related to the animations (when scrolled into view / while scrolling into view). Has anyone seen this behaviour? I’d love to know a fix for this - I’ve search high and low for answers and its a frustrating one!

Many thanks in advance for any help!!

Loom Link: Loom | Free Screen & Video Recording Software | Loom

Read Only: https://preview.webflow.com/preview/web-dev-expert-3cd767e6ea02b7181c297c21?utm_medium=preview_link&utm_source=designer&utm_content=web-dev-expert-3cd767e6ea02b7181c297c21&preview=eab4ef136c31a5503b99929aa3514fe9&workflow=preview

Live Site: Webflow Web Designer Portfolio

2

I’m working on a fix so if anyone has the time to help here please try to replicate the problem on the portfolio pages - i’ll work on the pricing page. Thanks!!

3

Hi Dave
For what it’s worth, I tested the pages on Chrome (desktop, mac, Version 117.0.5938.92) and I’m not seeing the same behavior. Everything is smooth. Have you tried restarting Chrome, empty cache, incognito mode, other machines, to see if it’s replicated?

4

Ok so the fix seems to be applying the animations to indivdual elements rather than divs which contain elements (although a single div containing multiple elements seems ok). That has fixed the problem for my pricing page but my portfolio page includes side scrolling so im not sure exactly how I can do that?? Bit of a head scratcher.

5

Hey thanks for your reply. I’ve updated Chrome and used incog and also canary and saw the behaviour there also (dont really want to flush my cache) . I’ve fixed the pricing page unless you were looking there? Portfolio page is still broken.

One of the wierdest things is I couldnt replicate the problem when I was using a chrome extension called “screen recorder” had to use loom instead to capture the video.

I appreciate you looking at this - its far beyound my realm of understand :slight_smile:

6

guess I should have done this too @Port_of_Folio cheers :slight_smile:

7

I’m able to replicate this on your site too (very nice btw!)

8

Thanks! That’s really strange. Seems specific to the horizontal scroll interaction on your specific browser. Beyond me! Do you use Chrome when using Webflow? Maybe a connection there.

This is my screen recording from earlier showing no flicker when the cursor leaves the viewport:

9

Hey @Port_of_Folio ,

Thanks for the video. I can’t replicate this problem on my laptop (also chrome / windows 10) or on browserstack on any configuration. So yeah perhaps its something unique to my computer / browser set up idk! Probs not something to worry about in that case. Well thats a day i’ll never get back :slight_smile: :roll_eyes:

Thanks for your help!