depthark
KPCKevin Powell - Community
•Created by depthark on 4/14/2025 in #help
How to elegantly identify whether a text-truncate has occurred in React?
I am currently using useEffect to compare scrollSize and clientSize, and optimize the render using memoization. I need to address performance issues, as there may be cases where I have hundreds of components on my page that need to be checked. Truncation can occur at different times for each component, depending on the length of the string. I believe I have written it correctly, but I am looking for the most optimal solution. Maybe someone has experience with this. BTW, if CSS scroll-state() container queries could be used for this case, it would be perfect. Thanks.
3 replies
KPCKevin Powell - Community
•Created by depthark on 4/11/2025 in #help
Animated details element using ::details-content
Hi, I'm playing with the pseudo-element ::details-content. I'm trying to animate the height. When I go from the closed state to open, everything is fine. When I go from the open state to closed, the height animation of the content doesn't work. I tried applying
transition-behavior: allow-discrete; and @starting-style, but it didn't help...🙈 Is there a way to solve this? Thanks a lot. https://codepen.io/luko248/pen/ZEXWmBX4 replies
KPCKevin Powell - Community
•Created by depthark on 10/20/2024 in #front-end
backdrop-filter
It doesn't matter if you put the static values, CSS custom properties, or inherit them via inherit, the backdrop-filter will not be reflected on the children 😦 Is it bug or feature?
https://codepen.io/luko248/pen/bGXrejO
16 replies