From f3cfd93a97bbd4612d9365995b4318b3a76c03d9 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 5 Sep 2023 18:37:18 +0200 Subject: [PATCH] Fix(web,web-twig): Fix `Button` flickering during spinner animation in Firefox --- .../web-twig/src/Resources/components/Button/Button.twig | 2 +- .../__snapshots__/buttonLoadingDefault.twig.snap.html | 8 ++++---- packages/web/src/scss/components/Button/_Button.scss | 3 +++ 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig index 56d3878519..d4583d0fdf 100644 --- a/packages/web-twig/src/Resources/components/Button/Button.twig +++ b/packages/web-twig/src/Resources/components/Button/Button.twig @@ -33,6 +33,6 @@ > {%- block content %}{% endblock %} {%- if _isLoading -%} - + {%- endif -%} diff --git a/packages/web-twig/src/Resources/components/Button/__tests__/__snapshots__/buttonLoadingDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Button/__tests__/__snapshots__/buttonLoadingDefault.twig.snap.html index 30a7c8c274..35f81a9723 100644 --- a/packages/web-twig/src/Resources/components/Button/__tests__/__snapshots__/buttonLoadingDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Button/__tests__/__snapshots__/buttonLoadingDefault.twig.snap.html @@ -6,10 +6,10 @@ + diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss index 7e6206dcd6..e5912bb92c 100644 --- a/packages/web/src/scss/components/Button/_Button.scss +++ b/packages/web/src/scss/components/Button/_Button.scss @@ -1,3 +1,5 @@ +// 1. Clip the loading spinner to fix button flickering during spinner animation. + @use 'sass:map'; @use 'theme'; @use 'tools'; @@ -81,6 +83,7 @@ .Button--loading { position: relative; + overflow: hidden; // 1. color: transparent; &:hover,