CSS container units (specifically `cqi`) can be used to fix gradient distortion on progress bars. By setting `container-type: inline-size` on the progress element and using `background-size: 100cqi`, the gradient background scales relative to the element's full width rather than compressing at small sizes, resulting in a consistent gradient appearance throughout the animation.
•1m watch time
Sort: