From 2c73153db0536b013f5fd741ccabb80b12fa1fe7 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 29 Jun 2022 16:07:48 +0000 Subject: [PATCH] limit pulsing blocks animation frame rate to 30FPS possibly resolves #1941 --- .../blockchain-blocks/blockchain-blocks.component.scss | 6 +++++- .../components/mempool-blocks/mempool-blocks.component.scss | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 5a9a7ea18..8c108dff7 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -114,7 +114,11 @@ } .flashing { - animation: opacityPulse 2s ease-out; + /* force compositing */ + will-change: opacity; + transform: translateZ(0); + /* effective max frame rate = (#keyframes - 1) x steps / duration */ + animation: opacityPulse 2s steps(30, end); animation-iteration-count: infinite; opacity: 1; } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 68ed1e26c..c41cde3fc 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -17,7 +17,11 @@ } .flashing { - animation: opacityPulse 2s ease-out; + /* force compositing */ + will-change: opacity; + transform: translateZ(0); + /* effective max frame rate = (#keyframes - 1) x steps / duration */ + animation: opacityPulse 2s steps(30, end); animation-iteration-count: infinite; opacity: 1; }