Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS textarea trick intermittently fails on iPhone #85

Open
simonw opened this issue Oct 1, 2023 · 6 comments
Open

CSS textarea trick intermittently fails on iPhone #85

simonw opened this issue Oct 1, 2023 · 6 comments
Labels
bug Something isn't working

Comments

@simonw
Copy link
Owner

simonw commented Oct 1, 2023

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
@simonw simonw added the bug Something isn't working label Oct 1, 2023
@simonw
Copy link
Owner Author

simonw commented Oct 1, 2023

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
Copy link

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

@simonw
Copy link
Owner Author

simonw commented Oct 2, 2023

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
Copy link

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
Copy link

maranomynet commented Oct 2, 2023

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
Copy link

maranomynet commented Oct 2, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants