Help with background image scaling on iPhone 5

  • lenardchengtw
    Asked on June 10, 2016 at 11:10 PM

    Thanks in advance for help. Wanting to upgrade but only if this problem is resolved. 

     

    I made a background with  translucent form on top. Made the background fixed so that it stays as the background when scrolling up and down the form. It's working so far except two problems:

     

    1: on iPhone 5s it renders the background in a different dimension (see attached as compared to viewed on other devices) and the photo looks twice the size and unpleasant. It looks fine on Samsung and iPhone 6s/iPad etc. How do I standardise the background scaling?

     

    2: on the thank you page, Samsung and android phones render a background that is the JPEG photo repeated twice. iPhone renders it accurately as one photo background.
     

     

    3: on some devices, when I scroll down , the background enlarges slightly (less important than 1&2)

     

    Thanks for your help

    L

    Jotform Thread 858557 Screenshot
    Page URL: https://form.jotform.me/lenardchengtw/78
  • Boris
    Replied on June 11, 2016 at 9:00 AM

    Glad to hear you like our services. I see that the form you are having troubles with is form 61611719453455, named Lenard and Hui-Fen Wedding RSVP.

    I have taken a look at this form, and I can see the issue you are describing - iPhone 5 is incorrectly scaling the background image. Upon taking a much closer look, this seems to be an issue caused by iPhone 5, rather than having anything wrong in your existing CSS or with the image.

    Please try injecting the following custom CSS into your form, and see if it helps with the incorrect image scaling on iPhone 5:

    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
      .supernova {
        background-size: cover;
        height: 100%;
        overflow: hidden;
      }
      body { 
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
      }
    }

    You can add CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The above provided workaround seems to have resolved this peculiar issue on my tests, but please do check and let us know how it goes on your end as well.

    When it comes to the issue regarding having a double image on your thank you page, that concern has been moved to a support thread of its own, so we can avoid confusion with the topic of this current thread. That support thread is here:

    https://www.jotform.com/answers/858624

    We will be assisting you with it there, shortly. Thank you.