Hai fatto veramente un’ottima domanda, purtroppo credo che questo sia un problema legato ai browser, che ancora qualche volta presentano delle “lacune” sulle funzionalità CSS3, proprio come in questo caso.
Applicando il border-radius al contenitore della progress (quello avente classe “.progress-box”), anche con l'”overflow:hidden” i bordi non vengono comunque arrotondati durante l’animazione (credo che ciò sia dovuto alla creazione dei layer grafici).
Mentre invece applicandolo alla progress direttamente, i bordi sì, vengono visualizzati, ma con lo scale subiscono uno “stretch”, in quanto tutte le animazioni che richiedono la creazione di livelli grafici sono delegate alla CPU sotto forma di bitmap (in altre parole sono delle immagini vere e proprie, e gli angoli arrotondati con il border-radius fanno parte di esse).

Comunque mi hai dato dell’ottimo materiale per un possibile futuro articolo, resta aggiornato, forse posterò una soluzione!

ottimo post, è da un mesetto che seguo i tuoi articoli, mi sono anche iscritto alla newsletter per il tuo ebook in arrivo, complimenti davvero!!!

ho una domanda da “rompiballe/pignolo” eheh…
Ho fatto una prova impostanto un border radius alla progress bar, ho visto che la transizione con lo scaleX non visualizza (correttamente immagino per la sua natura) lo smussamento corretto fino a quando non arriva al 100%.
In questi casi, per mantenere le performance e lo smussamento dei bordi, sarebbe meglio utilizzare un translateX? Anche se mi sa che così, non si vedrebbe lo smussamento iniziale della barra. Oppure c’è qualche soluzione alternativa?

è un caso particolare lo so, se mai mi si dovesse presentare, “spingerò” per l’eliminazione dei bordi smussati…ehehe

Grazie.

Ciao