From fb0128c7ec4e35055ebb387dcc3bb2d373394437 Mon Sep 17 00:00:00 2001 From: winwin2011 Date: Thu, 12 Nov 2020 16:18:03 +0800 Subject: [PATCH] Fix progress bit overflow bug (#110411) * Fix progress bit overflow bug bit: 100% width, parent 5000% width, translateX(4900%) + bitwidth(100%) = parentwidth(5000%). 4950% will make half of progress bit overflow. :p * Set progress bit to center at 50% animate --- src/vs/base/browser/ui/progressbar/progressbar.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/vs/base/browser/ui/progressbar/progressbar.css b/src/vs/base/browser/ui/progressbar/progressbar.css index 64368d699b0..55e6a1a6963 100644 --- a/src/vs/base/browser/ui/progressbar/progressbar.css +++ b/src/vs/base/browser/ui/progressbar/progressbar.css @@ -42,7 +42,10 @@ * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of * that container. Since translateX is relative to the progress bit size, we have to multiple it with * its relative size to the parent container: - * 50%: 50 * 50 = 2500% - * 100%: 50 * 100 - 50 (do not overflow): 4950% + * parent width: 5000% + * bit width: 100% + * translateX should be as follow: + * 50%: 5000% * 50% - 50% (set to center) = 2450% + * 100%: 5000% * 100% - 100% (do not overflow) = 4900% */ -@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4950%) scaleX(1) } } +@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }