In reaction to Baymard’s post ‘avoiding inline labels in mobile forms‘ there is a recent pattern I have been seeing, at least have seen so far on 2 desktop sites:
Clicking an empty form moves the inline label to above textfield, and resizes label
The patterns ignores Baymard recommendations, but still works for me. Still have to test if & how they did it on mobile. The only issue I can imagine is if the textfield is on top of the viewport. Otherwise shouldn’t seem a problem CSS wise.
Update: Nowadays this is standard Material design (see material.io)