From 9d85d2b02ce7cb0ecbf4dc7baeef32deeec6f053 Mon Sep 17 00:00:00 2001 From: Adrien Dorsaz Date: Tue, 17 Jan 2023 23:24:37 +0100 Subject: [PATCH] fix gasp between backgrounds of body and sidebar divs The issue is the linear-gradient in the body background seems to not working really correctly with pixel dimensions (in Firefox at least): if you zoom in / out the page you'll see the body background to not always correctly update the rendering (and so you'll see a growing gasp for example). Due to this issue, there was a gap between the backgrounds of the body and the sidebar elements. PR #354 tried to solve this by adjusting the linear-gradient pixel dimensions, but due to the bug of linear-gradient implementation, it was not working when window was resized or page zoomed. As the linear-gradient usage in the body background was clearly already a workaround to create two vertical color stripes, we replace it with another workaround using the CSS feature which allows to define multiple background images with different size and position. First background image is defined with the sidebar color (using linear-gradient with only one color) and the width which resolve the pixel gasp reported in #354 (which means the width should be the branding width + body border width). To be able to define a color as an image, we use again linear-gradient, but, this time it fills all the stripe with the same color, so we won't have error due to linear-gradient implementation. Second image is defined from the first image position for the rest of the body block with the container color. This new workaround idea comes from this StackOverflow answer which explain how to create pixel perfect horizontal stripes: https://stackoverflow.com/a/24829344 --- app/assets/stylesheets/RonRonnement.scss | 1 + .../contrib/RonRonnement-Classic.scss | 16 ++++++---------- .../stylesheets/contrib/RonRonnement-Sepia.scss | 6 +++--- app/assets/stylesheets/parts/a_tag.scss | 14 +++++--------- app/assets/stylesheets/parts/sidebar.scss | 1 - 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/RonRonnement.scss b/app/assets/stylesheets/RonRonnement.scss index c83676ab1..0df676f09 100644 --- a/app/assets/stylesheets/RonRonnement.scss +++ b/app/assets/stylesheets/RonRonnement.scss @@ -9,6 +9,7 @@ $PX_MARGE_GAUCHE: 42px; $PX_MARGE_DROITE: 30px; $PX_BANDEAU: 7px; $PX_BRANDING_LARG: 201px; +$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px; $PX_SITE_PAD_DROIT: 42px; $PX_CONT_TOP: 34px; diff --git a/app/assets/stylesheets/contrib/RonRonnement-Classic.scss b/app/assets/stylesheets/contrib/RonRonnement-Classic.scss index 3246b5400..fe8dedc24 100644 --- a/app/assets/stylesheets/contrib/RonRonnement-Classic.scss +++ b/app/assets/stylesheets/contrib/RonRonnement-Classic.scss @@ -40,6 +40,7 @@ $PX_MARGE_GAUCHE: 42px; $PX_MARGE_DROITE: 30px; $PX_BANDEAU: 7px; $PX_BRANDING_LARG: 201px; +$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px; $PX_SITE_PAD_DROIT: 42px; $PX_CONT_TOP: 34px; @@ -88,15 +89,11 @@ body { max-width: 150ex; margin: 0 auto; border: solid $C_BORDER_FONCE; - border-width: 0 1px; - background: linear-gradient( - 90deg, - $C_CLAIR, - $C_CLAIR $PX_BRANDING_LARG, - $C_CONTAINER $PX_BRANDING_LARG, - $C_CONTAINER - ) - #fff; + border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT; + background-repeat: no-repeat; + background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto; + background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT; + background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER); } a { @@ -360,7 +357,6 @@ a.edit_client_app, width: $PX_BRANDING_LARG; text-align: left; font-size: 0.8em; - background: $C_CLAIR; a { font-weight: inherit; diff --git a/app/assets/stylesheets/contrib/RonRonnement-Sepia.scss b/app/assets/stylesheets/contrib/RonRonnement-Sepia.scss index 91b5fe455..d8e596f5e 100644 --- a/app/assets/stylesheets/contrib/RonRonnement-Sepia.scss +++ b/app/assets/stylesheets/contrib/RonRonnement-Sepia.scss @@ -36,6 +36,7 @@ $PX_MARGE_DROITE: 30px; $PX_TOP: 16px; $PX_BANDEAU: 7px; $PX_BRANDING_LARG: 201px; +$PX_BODY_BORDER_WIDTH_LEFT_RIGHT: 1px; $PX_BRANDING_HEIGHT: 186px; $PX_SITE_PAD_DROIT: 42px; $PX_CONT_TOP: 34px; @@ -85,8 +86,8 @@ body { margin-top: 0; margin-bottom: 0; padding-top: $PX_TOP; - border-left: 1px #333 solid; - border-right: 1px #333 solid; + border-left: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid; + border-right: $PX_BODY_BORDER_WIDTH_LEFT_RIGHT #333 solid; background: #fff; } @@ -285,7 +286,6 @@ input[type="submit"] { width: $PX_BRANDING_LARG; text-align: left; font-size: small; - background: $C_CLAIR; a { font-weight: inherit; diff --git a/app/assets/stylesheets/parts/a_tag.scss b/app/assets/stylesheets/parts/a_tag.scss index e7369af54..100378aeb 100644 --- a/app/assets/stylesheets/parts/a_tag.scss +++ b/app/assets/stylesheets/parts/a_tag.scss @@ -21,15 +21,11 @@ body { max-width: $BODY_MAX_WIDTH; margin: 0 auto; border: solid #999; - border-width: 0 1px; - background: linear-gradient( - 90deg, - $C_CLAIR, - $C_CLAIR $PX_BRANDING_LARG, - $C_CONTAINER $PX_BRANDING_LARG, - $C_CONTAINER - ) - #fff; + border-width: 0 $PX_BODY_BORDER_WIDTH_LEFT_RIGHT; + background-repeat: no-repeat; + background-size: $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT, auto; + background-position: 0, $PX_BRANDING_LARG + $PX_BODY_BORDER_WIDTH_LEFT_RIGHT; + background-image: linear-gradient($C_CLAIR, $C_CLAIR), linear-gradient($C_CONTAINER, $C_CONTAINER); } a { diff --git a/app/assets/stylesheets/parts/sidebar.scss b/app/assets/stylesheets/parts/sidebar.scss index d84a90e2a..49df9bfdd 100644 --- a/app/assets/stylesheets/parts/sidebar.scss +++ b/app/assets/stylesheets/parts/sidebar.scss @@ -4,7 +4,6 @@ text-align: left; font-size: 0.8em; line-height: 1.3; - background: $C_CLAIR; a { font-weight: inherit;