Subscribe on changes!

-webkit-line-clamp style binding not getting updated in Chrome/Safari

avatar
Mar 7th 2023

Vue version

3.3.0-alpha.4

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdVE2P2zYQ/StT9eAWsKQA7Un1pi3S9FQEBVr0pAslje3JUiSXH7YXxv73PsqS43WCHAIYMjlf781wZs7F785Vh8RFU2xC78XFt62R0Vkf6f3JKTOoTvO/fIq09XakVVW/s+PksmoNUWv4NBkPvFVJRzpnaQ8Ta9jE0FwEdBdsnYUv+L60ZlNfgXGJPDqtIuNGtEHw2auMcHtLf1nPI4kLaaTBauspSCQ1clwD1QTuI8fkSQ3iJPRidsRaYkV/gE9PnUY4OIDgaAdL0UuI8pS4ondahUDKRdCmqHqJQsH2YsNTQjhCFOsV4QNzmDj2GTF1osjYEL1aTzIxPbtoA+1lZKPYhoo+qJGUiUwmmX5No4pRgBXpkMkR7zL9g9UpuiyUA3tAqbTLxP5jUOySRsajOsmYwprYAwBkACZDAptOOjZDGrMKISJrnQL5FD3cgnLCBirgZM5DZhahmM0AsHBCevhV317n91GQ7GJMGoZAUD1S11rdPMBNDGQcFc9sKvp7r8KF2IUNGQkC9ppliyRhz9ut4IHgO3midsoL7MVkW13Rnyn0nK+j2hnUaYnsFYfp8RBYoaPBWzItUM11SLDXHJIaVLWp75svt+q1PYt1cRmTclSu+hiswQhNvd7OitAW1+5vCwxMvrfFPkYXmroO2z5P0cdQWb+rcao8HhIvU3EYy87bY2CPwG0xDcsco4YQ3VF6FII9+6/FvDP9LO40gxhBpLLMdF4DrydwkMN0wDGgHNTnMXloi7vitAU1IT5rhupMq/LI3aPEUovhEi6jWzV0ceGBfqWVwTiuqMFUGQ5gUcwgGUbbSPUCWmfUrzDIEI9A33vePqy+X9FvvZb+8aoH3AN9t5xvcM7nV4T+2dsjujWEzOpyGzEDK3pBie6YbOpLVW7aYdpd1z32pZ1oMA+I/HoPrvC2Wem8xQMu3TIV5Xojis8Orh/S2LGfm4HI81MSz0NDW6UDX+UzaEM/zaK8Zi/f/D+oqH74cYnt8wCaT0hLRV4HnSrwxW09PTmF3joeptJUd32xhMbmKo8yxH1DP795406/XMSDBNTvuaGlYTq7qG4kpfXYX0gJ7RylV3o2sbhvtT022LXDwGYWZ9zykw6zjz0mYdJOqdwQndpnIdknH6xvsB0Ey9rP4fq8/hpsrsRLCBQhJ46Mi5f/AUkEg/0=

Steps to reproduce

Open the repro in Chrome or Safari and click the "Show more" link. Repeat in Firefox to see it working.

What is expected?

When clicking the link the element style binding should be updated from -webkit-line-clamp: 3; to -webkit-line-clamp: none; (or vice versa). This functions correctly in Firefox but not in Chrome or Safari

What is actually happening?

The initial value of the style binding is set correctly, however clicking the link doesn't update it.

System Info

No response

Any additional comments?

This appears to be something unique to the -webkit-line-clamp style. I've tried other styles such as height which work as expected, and even styles with the -webkit prefix such as -webkit-box-orient are able to be updated correctly. I've tried using camel case for the attribute name and every other solution I can think of but I can't figure out why issue this is occurring in such a specific way.

avatar
Mar 7th 2023

Update: setting the value to unset or initial instead of none fixed the issue!