search

SSENSE / vue-carousel

A flexible, responsive, touch-friendly carousel for Vue.js
https://ssense.github.io/vue-carousel/
MIT License
1.72k stars 505 forks source link

bug: css hiding persisting through to visible slides #437

Open DrMeers opened 5 years ago

DrMeers commented 5 years ago

Once in every 10-20 page loads, approximately, the .VueCarousel-inner div retains a CSS property of visibility=hidden and thereby hides all items even if/when you interact with the (empty) carousel. Resizing the browser rectifies the visibility status.

I'm using vue-carousel v0.18.0-alpha downloaded this week.

Similar behaviour was described in https://github.com/SSENSE/vue-carousel/issues/138#issuecomment-369066595

Normal/correct load:

Screen Shot 2019-05-06 at 11 33 26 am

Intermittent/hidden load:

Screen Shot 2019-05-06 at 11 33 07 am

No errors in the console.

I could add a workaround to trigger $('.VueCarousel-inner').css('visibility', 'visible') on a timeout (which also triggers correctly updated flex-basis etc), but would prefer to make the underlying loading mechanism robust.

TheNoim commented 5 years ago

I have the same issue. However, I don't like the idea of using an manual timeout workaround. Btw I think https://github.com/SSENSE/vue-carousel/issues/138#issuecomment-456382817 is a better workaround. At least for me it is.

quinnlangille commented 5 years ago

Hey @DrMeers thanks for flagging! This is really weird. The resizing causes the carousel to recompute it's properties which explains the fix. I'm not really sure why the classes are persisting though.. I'll flag this as a bug and hopefully someone can investigate, otherwise I'll get to it when I can!