Collapse transition never finishing for custom zoom of the page

[krzysztof-krzeszewski]

In the code the onCollapse function is called only when the following condition is satisfied:

    if (baseHeight.value === getComputedHeight(collapseRef)) {
        onCollapsed()
    }

However the computed height of the element is not always exact.

For instance I have an element that is 42px in height. When running in chrome, when user zooms the page out to 90% the computed height value is no longer 42px but 41.9965px. So this condition fails, and the state of the collapsible is never updated.

This is a subpixel rendering issue that caused it, so I think a proper solution would be to trim/round the computed value. I don't think a sub-pixel precision is required and it would fix this issue.

On an unrelated note: floating point numbers shouldn't be compared using equality operator.

[smastrom]

Hi @krzysztof-krzeszewski, thanks for raising this issue. Although I couldn't reproduce this on lastest Chrome version on macOS (the scaling is at 75% in the video below but I tried with any other percentage):

Registrazione.schermo.2024-04-08.alle.12.22.05.mp4

You're correct and this should definitely be made bullet-proof. Already working on it.

[krzysztof-krzeszewski]

You are correct, sorry I misreported the issue. I meant the onExpanded function not the onCollapsed actually. Cause onCollapsed is meant to trigger when it reaches 0.

I think your demo is working fine, because height is not explicitly set, but I may be mistaken. Either way I used your demo project, explicitly set the height of the content and on newest version of chrome I have an expand event that never finishes when zoomed out to 90%.

[smastrom]

Ah ok I see, please let me know if it works as expected here: https://1-3-2.vue-collapsed.pages.dev/

[krzysztof-krzeszewski]

It's working fine for me.