Webflow Bug | Position Sticky funktioniert nicht
Im heutigen Tutorial möchte ich dir einen Webflow Bug mit der Position Sticky zeigen, welcher mir am Anfang einige Kopfschmerzen bereitet hat.
Es geht um die Position Sticky in Kombination mit der Overflow hidden Einstellung. Wie du diesen Bug umgehen bzw. Verhindern kannst, erfährst du auch im Video:
Häufig möchtest du eine Sticky Komponente in Webflow einbauen, um eben einen Inhalt beim scrollen an eine bestimmte Position "fest zu kleben". Und gerade dann, wenn du beispielsweise Bilder oder Schattenelemente mit in diese Sticky Komponente einbauen möchtest, möchtest du nicht, dass (vor allem im responsive Design) dein Inhalt durch die Skalierung auf kleinere Devices über den Bildschirmrand hinaus geht. Denn das verursacht echt unschönes horizontales scrollen. Also gibst du dem Elternelement oder der ganzen Sektion die Einstellung Overflow hidden mit.
Overflow hidden im Elternelement schneidet überstehenden Content von Kindelemente ab, sodass nichts über die Box ragen kann.
Nun ist es so, dass bei Webflow ein Bug existiert, der die Einstellung Sticky in Kombination mit der overflow hidden Einstellungen unwirksam macht und zwar immer dann wenn ein Elternelement der Sticky Komponente die Einstellung overflow hidden hat. Die Animatoin funktioniert so nicht mehr und der Sticky Content scrollt wie gewohnt aus dem Viewport raus.
Erst wenn die Sticky Komponente selbst oder ein Kindelement der Sticky Komponente Overflow hidden eingestellt ist, bleibt der gewollte Inhalt beim scrollen kleben und die Animation funktioniert wieder. Also immer daran denken, bevor du lange du auf Fehlersuche gehst 😉.
