Consistent scaling when keyboard is visible on mobile device?

[TheNomadicAspie]

I'm currently using an animation with scale: 8 to scale up a small image, and it works fine. This is how it looks.

 

The problem is, at some points this animation is called when a keyboard is visible, which seems to cause the image to scale relative to that half-sized image, and then get even larger. Here's what I mean. So this is what the app looks like prior to the animation being called.

 

Then this happens when the app resizes once the keyboard moves away.

 

Is there a way to compensate for this?

[OSUblake]

Hi, can you make you a minimal demo showing the issue?

[TheNomadicAspie]

Unfortunately not. I created one

See the Pen NWaRyzo by TheNomadicAspie (@TheNomadicAspie) on CodePen

 but the behavior is different in CodePen. If you are typing in the input box and click the button, on CodePen it looks fine, but when I run it in my environment it becomes twice as large. I don't know if it's because of Parcel, my package bundler, or if it's something else... =/

 

Or maybe it's CodePen, because I noticed on CodePen my keyboard immediately shrinks before the animation plays, but in my environment the animation plays first, then the keyboard shrinks expanding the rest of the app, which causes the image to scale larger than it should.

[TheNomadicAspie]

For now I used a hacky solution I found to detect if the keyboard is visible, and then I change the scale amount if so. It's not ideal, but it's working for now.

 

let full_window_height = window.innerHeight
let is_keyboard = false
let scale_amount

window.addEventListener('resize', () => {
	if (window.innerHeight === full_window_height) {
		is_keyboard = false
	} else {
		is_keyboard = true
	}
})


if (is_keyboard) {
	console.log("magnifyingGlassToCenter is_keyboard is true")
	scale_amount = 4
} else {
	console.log("magnifyingGlassToCenter is_keyboard is false")
	scale_amount = 8
}

 

[OSUblake]

Yeah, I'm at a loss because I can't reproduce it on codepen either. 🤷‍♂️

[TheNomadicAspie]

Just now, OSUblake said:

Yeah, I'm at a loss because I can't reproduce it on codepen either. 🤷‍♂️

Thanks anyway, I appreciate you trying to help. This will work for now if no one else has run into the same problem and has a better way to handle it.