Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-09-14 23:30:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix progress bit overflow bug (#110411)

Browse Source 
* 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
This commit is contained in:
winwin2011
2020-11-12 09:18:03 +01:00
committed by GitHub
parent 33a49a9c63
commit fb0128c7ec
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/browser/ui/progressbar/progressbar.css
+6 -3
View File
@@ -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) } }