search

simonw / til

Today I Learned
https://til.simonwillison.net
Apache License 2.0
1.12k stars 93 forks source link

CSS textarea trick intermittently fails on iPhone #85

Open simonw opened 1 year ago

simonw commented 1 year ago

https://til.simonwillison.net/css/resizing-textarea

Sometimes it works, sometimes it doesn't. I've found it easiest to recreate clicking a link to it in the Twitter in-app browser.

I managed to run the Safari debugger against it, where I confirmed that the data- attribute is correctly updating - I can't figure out why that doesn't cause the ::after element to increase in size:

https://github.com/simonw/til/assets/9599/b4506820-18c8-47fd-80d5-400e0e92ecba

simonw commented 1 year ago

I used QuickTime to mirror my iPhone screen to my computer to make this demo, then used the Safari debugger to connect to that.

romechenko commented 1 year ago

It seems related to timing wrt the document state. In this video I use an incognito tab to reproduce the bug the force the screen to re-render by changing the size of the font and the bug goes away.

https://github.com/simonw/til/assets/5204392/92dfc588-baf8-4757-822e-ac744b0d4eca

simonw commented 1 year ago

Huh, I wonder if the fix would be to set document.body.style.fontSize = x - where x could be the current fontSize * 1.00001 or similar.

romechenko commented 1 year ago

I think the real issue is about timing. In the video I change the font size up and then rest it back down. I might be as simple as running the JavaScript code a little later, such as on document load.

maranomynet commented 1 year ago

Huh, I wonder if the fix would be to set document.body.style.fontSize = x - where x could be the current fontSize * 1.00001 or similar.

Doing an initial jiggle to emulate what @ImJohnDoe did, might work. But, I'd try to avoid global reflows caused by changing <body/> font-size. Try to scope it on the <textarea/>'s parent or the ::before itself.

This might also be a CSS grid row-height reflowing bug. Maybe you could stop relying on grid, and instead make the ::before be display:block; and set the textarea to position:absolute; with top/right/bottom/left: 0;

maranomynet commented 1 year ago

BTW, to apply the principle of Progressive Enhancement to this, one might consider applying a reasonable default height to the textatea, and then only set its height to single-row (and remove its resizability and scrollbars) when/if the parent has the data- attribute.