Hola @elenaauto, el problema que describes es muy común cuando se combinan border-radius y elementos hijos animados dentro de un contenedor con overflow: hidden. El border-radius del elemento hijo (.free-shipping-progress-bar) está compitiendo con el overflow: hidden del padre (.free-shipping-progress).
Durante la transición de width, algunos navegadores pueden tener dificultades para recortar correctamente los bordes redondeados del hijo que se está animando, especialmente si el hijo también tiene su propio border-radius.
Para asegurar que la barra interna no se desborde, lo más limpio es aplicar el border-radius solo al contenedor exterior y confiar en que su overflow: hidden se encargue de recortar el contenido interior. El elemento interior no necesita su propio border-radius.
Aquí tienes la modificación en tu custom.css:
.free-shipping-progress {
background-color: #e9ecef;
border-radius: 10px;
height: 20px;
overflow: hidden; /* Esto es clave */
position: relative;
}
.free-shipping-progress-bar {
background-color: #28a745;
height: 100%;
Con este cambio, el contenedor principal .free-shipping-progress se encarga del redondeo de los bordes, y la barra interior simplemente se recorta a esa forma. Pruébalo y me dices, esto debería resolver el desbordamiento visual. Estás en la versión 9.1.1, que ya tiene bastante bien optimizado el manejo del DOM, así que este ajuste CSS debería ser suficiente.