CSS textarea trick intermittently fails on iPhone

Question

CSS textarea trick intermittently fails on iPhone

simonw opened this issue 9 months ago · comments

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:

CleanShot.2023-10-01.at.07.31.26.mp4

Simon Willison · Answer 1 · Sun Oct 01 2023 22:35:07 GMT+0800 (China Standard Time)

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

Roman Pshichenko · Answer 2 · Mon Oct 02 2023 00:36:32 GMT+0800 (China Standard Time)

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.

RPReplay_Final1696178061.mp4

Simon Willison · Answer 3 · Mon Oct 02 2023 08:12:32 GMT+0800 (China Standard Time)

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.

Roman Pshichenko · Answer 4 · Mon Oct 02 2023 12:47:29 GMT+0800 (China Standard Time)

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.

Már Örlygsson · Answer 5 · Mon Oct 02 2023 16:53:54 GMT+0800 (China Standard Time)

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;

Már Örlygsson · Answer 6 · Mon Oct 02 2023 17:01:40 GMT+0800 (China Standard Time)

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.