leedssheung

If anyone needs an urgent solution, I have a quick dirty fix for this bug:

CSS:

#watson-box.fixed {
	height: 45vh !important;
}

JavaScript:

jQuery(document).on('focus', '.message-input', function() {
	if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
		jQuery('#watson-box').addClass('fixed');
	}
});
jQuery(document).on('blur', '.message-input', function() {
	if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
		jQuery('#watson-box').removeClass('fixed');
	}
});

• This reply was modified 5 years, 5 months ago by leedssheung.
• This reply was modified 5 years, 5 months ago by leedssheung.

When the virtual keyboard is triggered, we found this from Safari Web Inspector:

<div id="watson-box" class="drop-shadow animated" style="height: calc(1220px);">

The height is wrongly calculated as 1220px on our iPhone XS (iOS 12.4.1), making the text input field not visible from screen.

And sometimes it becomes:

height: calc(36px);

so it becomes sticked to the top.

• This reply was modified 5 years, 5 months ago by leedssheung.
• This reply was modified 5 years, 5 months ago by leedssheung.

Do it work on any of your iOS device? I believe the issues is very obvious on all iPhone / iPad. Using both Safari and Chrome, the input field may disappear when virtual keyboard comes out.