1 Reply Latest reply on Dec 18, 2012 10:19 AM by Jon Tara

    Image bug on iOS?

      Hi Guys,

       

      I am using this code in my html page to show the images that were taken/chosen. You click on Image, then you choose or take an image then you'll be redirected to the below view, and I want to show the image. Everything works fine Except that when the image is returned (in both cases, if it was chosen from the gallery or taken as a new image), the header will get ruined! I will just see like half of the header vertical width! I tried many things, like setting the data-position="fixed" on the header, but nothing seems to work. I tried the same example on Android and it worked fine, i.e. the header doens't change at all. SO possibly this is a bug in iOS? can you please help? I attached a screenshot showing what i'm seeing. You can see the ruined header.

       

                   <a href="<%= url_for :controller => :Image, :action => :index %>" data-transition="fade">Image</a>

                    

                    <% @images.each do |obj| %>                  

                 <img src="<%=Rho::RhoApplication::get_blob_path(obj.image_uri)%>" id="img11" width="300px"/>

                

                  <a href="<%=url_for(:controller => :Image, :action => :delete, :id => obj.object)%>">

                    <span class="title">Delete</span>

                   </a> 

                  <!--<a href="<%=url_for(:controller => :Image, :action => :upload_image, :query => { :id => obj.object, :customerid => "33" }) %>">-->

                  <a href="javascript:void(0)" onclick="javascript:upload_image('<%= obj.object %>',$('#AssetNbr').val())">

                  <span class="title">Upload</span>

                   </a>                

                <% end %>

       

      Thanks,

      Jonathan

        • Re: Image bug on iOS?
          Jon Tara

          This looks like it's due to the UIWebView/Mobile Safari "forms assistant".

           

          When you took this screenshot, had the user been doing input? That is, had the virtual keyboard been displayed and then dismissed?

           

          I use this code to work around this problem:

           

          /* Mobile Safari Forms Assistant can leave your page scrolled after the keyboard has been

          * dismissed. This jQuery Mobile hack will scroll the page back to the top when all inputs

          * on the page are blurred.

          *

          * Note that this is only appropriate when your pages are designed to device-height (i.e. the

          * page is not designed to scroll.) If you need to scroll content, you can use an internal

          * scroller, such as iscroll4. (I reccomend using the jquery.mobile.iscrollview plugin.)

          *

          * So, why is this needed, then? Unfortunately, the Forms Assistant seems to grow the page. As well, JQM

          * adds some extra space at the bottom of the page. So even "fixed height" pages can be scrolled

          * in JQM.

          */

          (function mobileSafariFormsAssistantHack($) {

            "use strict";

            $(document).on("pageinit",

              function installDelegation(event) {

                var $page = $(event.target);

                $page.on("blur", "input,textarea,select",

                  function onBlur(inputEvent) {

                    setTimeout(function onAllBlurred() {  // Need this timeout for .ui-focus to clear

                      // Are all of the input elements on the page blurred (not focused)?

                      if ($page.find("input.ui-focus,textarea.ui-focus,select.ui-focus").length === 0) {

                        $.mobile.silentScroll(0);        // If so, scroll to top

                        }

                      },

                    0);

                  });

              });

            }(jQuery));

           

          You may need to change $(document).on to $(document).bind, since I'm not sure if the version of jQuery that ships with Rhdoes has on().

           

          Edit: may also have to change $page.on("blur", "input,textarea,select" to $page.delegate("input,textarea,select", "blur"... Sorry, I use JQuery 1.8.2 with jQuery Mobile 1.2, I haven't used 1.0 in ages.

           

          I'm not sure this is needed any more if you update to jQuery Mobile 1.2, which I recommend at this point. Rhodes still ships with JQM 1.0, which is way out of date. It was a good decision at the time to stick with 1.0 since 1.1 was so buggy, but 1.2 is quite solid. If you stick with 1.0 it has many issues with newer browsers (e.g. in iOS 6) as it is not maintained to keep up with new browser releases.