HTML5 Distortion of Interface Graphics (in overlay popup)

    Hi Folks,

    Having problems with the iPad (iOS 5.1.1) version of a tour for a client. The tour opens in an overlay popup. For some reason, the nav button pngs are ugly and distorted (on desktop, when I directly open the graphic online and zoom in on Firefox browser from 100%, I observe the same distortion). They look OK on desktop version. Desktop and tablet versions use the same source xml.

    Furthermore, there is a mystery 1/2 pixel space between the bar and the bottom of the tour window. In the xml, align="bottom" is set as it should be for the bar graphic.

    Has anyone else encountered this issue and/or any obvious reasons why this may be happening? I've got a feeling it's something to do with the zoom level in the overlay but not really sure.

    Thanks as ever,

    Malcolm

    Hi,

    this is pano embedded as iframe into an other page? (it seems so)

    When this is happing, the Safari browser is rendering the embedded iframe page at a different size and then scaling the whole page by itself down and this will be inaccurate and can results in such alignment problems.

    A solution would be rendering the outer page already unscaled with 1:1 viewport mapping. Then the embedded iframe will be also correct. To do this add this viewport setting to the main outer html page:

    Code
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />


    But note - this will affect also the size of all other elements on your page.

    Best regards,
    Klaus

Participate now!

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

Register Yourself Login