search

smastrom / vue-collapsed

🏋️‍♂️ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
https://vue-collapsed.pages.dev
MIT License
123 stars 8 forks source link

When section is expanded, overflow: hidden (among other differences) is added in Firefox but not Chrome #24

Closed xenia1 closed 3 months ago

xenia1 commented 3 months ago

Hi,

I ran into the following issue in Firefox (v 124-124.0.1):

I have a dropdown within a collapsible section. The part of the dropdown which is outside the slide container is cut off in Firefox but not in Chrome:

a) Firefox - Screenshot 2024-03-27 at 3 57 43 PM

b) Chrome - Screenshot 2024-03-27 at 4 00 49 PM

It looks like the reason is that in Firefox, some additional CSS classes are added which are not added in Chrome. Additionally, the state is not the same (expanded/collapsed in Chrome vs expanding/collapsing in Firefox):

a) Firefox - Screenshot 2024-03-27 at 4 11 48 PM

b) Chrome -

Screenshot 2024-03-27 at 4 11 20 PM

Replication

You can see this effect in the stackblitz link provided on the github readme if you inspect one of the sections:

a) Firefox - Screenshot 2024-03-27 at 3 47 51 PM

b) Chrome -

Screenshot 2024-03-27 at 3 47 38 PM

Please can anything be done about this so that Firefox is consistent with Chrome, i.e. it doesn't have those additional classes? Or is there an appropriate workaround I can use?

Thanks!

xenia1 commented 3 months ago

Updated to latest version (1.3.1) and it's fixed 🤦‍♀️.

Same cause/ fix as for this - https://github.com/smastrom/vue-collapsed/issues/23 ?

smastrom commented 3 months ago

Updated to latest version (1.3.1) and it's fixed 🤦‍♀️.

Same cause/ fix as for this - #23 ?

Yeah, versions < 1.3.1 are broken on Firefox >= 124. Installing the latest version will fix everything 😃