Text input form scroll position jumping when on-screen keyboard shows, ios safari.

  • I'm currently overlaying an input form (built using html in it's own div) over the top of a div with the krpano viewer.

    Symptoms:
    On ios devices with small screens (e.g. iPhone5 portrait or smaller) krpano seems to be triggering a full window redraw when the on-screen keyboard is pressed. This pushes the input boxes behind the on-screen keyboard and the user can no longer see what he/she is typing.

    example:
    https://test.fancam.com/user_input_redraw/input.html

    If I disable the krpano viewer the redraw doesn't occur and the view above the on-screen keyboard scrolls and stays in the correct position for the user to see what he/she is typing.

    example:
    https://test.fancam.com/user_input_red…o_disabled.html


    Devices to be reproduced on: (safari, 8.4, 9.3, 10.0)

    iphone 4, 4s, 5, 5s - portrait and landscape - (safari/chrome)
    ipad, ipad2, ipad retina - landscape only - (safari/chrome)
    iphone 6, 6s - landscape - (safari/chrome)


    on the iPhone 6, iPhone 6s, iPad - portrait the layout works as expected.

    Hypothesis:
    Perhaps there is a lost focus event which is sent when the on-screen keyboard is pressed, and for some smaller screensizes this causes a redraw of the css3d canvas in krpano? If so is there a way to disable this when i show my input form over the top of krpano?

  • Hi,

    that seems to be related to the iPhone 'fullscreen mode hacks' - the viewer scroll the page to top when not there.

    A way to avoid these hacks would be embedding krpano 'not as fullpage element' (at least on startup) - then you could control the size and page scrolling fully yourself.

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!