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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!