metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Incorrect width of cells initially hidden. Width controlled by min/max-width. #909

Closed chessydk closed 5 years ago

chessydk commented 5 years ago

Testcase: https://codepen.io/chessydk/pen/gqVWQL

When you slide left, revealing new cells, you see their sizes are incorrect. The width of the cells are determined via min-width and max-width and should resolve to max-width because the text wraps - like the initially visible cells.

chessydk commented 5 years ago

I guess Flickity is not to blame, so feel free to close. I have reproduced the issue without Flickity. It is some weird behaviour (in all major browsers) where absolute positioned elements with wrapping text gets different width depending on whether they are rendered in the visible or the overflowed area. Strange indeed.

desandro commented 5 years ago

Thanks for following up! Yeah, its a tricky issue that's driven me bonkers in the past. The best way to address it is by setting explicit sizes as opposed to relying on min/max width