Overflow Problematico

Mirk0

Nuovo Utente
18 Ago 2021
4
0
1
Ciao, ho un problema con un overflow che è presente quando non dovrebbe, ho letto gli altri post a riguardo ma mi sembra abbiano tutti il problema opposto al mio e non sono riuscito a trovare una soluzione.
Sto cercando di costruire una semplice web app ToDo list. Ogni elemento della lista è un div.todo che è contenuto in un div.todo-container al quale ho assegnato le dimensioni.
Quando una elemento .todo viene eliminato (schiacciando sull'icona del cestino o con uno swipe-right) parte un animazione che fa traslare l'elemento verso destra e poi l'elemento viene eliminato.
Il problema è qui: l'elemento che trasla viene 'tagliato' dal contenitore anche se ho impostato overflow-x: visible sul container. Ho provato a togliere e modificare gli overflow in vari modi ma non sono mai riuscito a far vedere l'elemento oltre le dimensioni del container.
Ci sarebbe la possibilità di dare position:absolute agli elementi e relative al container ma questo poi crea una marea di altri problemi e quindi è una soluzione che vorrei evitare.

Lascio qui i file, provate sul browser ad eliminare un elemento creato e vedrete che c'è uno strano taglio sull'elemento. Se volete trovate anche tutti i file su github, nome mirk-00 e repo Todo-test.
 

Allegati

Ciao buongiorno,

a me pare tutto giusto l'elemento non si taglia, devi solo aumentare il tempo di translateX nella classe removing


Ciao
Elia
 
Io usando chrome vedo l'elemento che si taglia, inoltre ho scoperto che overflow: visible su una direzione non è compatibile con overflow:hidden sull'altra direzione, quindi hidden viene interpretato come auto ecco perchè viene tagliato. Per risolvere ho dovuto un po' modificare la struttura della pagina e per ora ho risolto così, mantenendo le stesse funzionalità e estetica. Comunque questo 'bug' di CSS è noto da tempo a quanto pare. Non metto il link per il regolamento ma trovi più info su stackexchange.
 

Discussioni simili