CSS textarea trick intermittently fails on iPhone

[simonw]

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]

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]

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]

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]

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]

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]

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.