Moodle
  1. Moodle
  2. MDL-42980

Clean: Activity chooser's Add/cancel button on iPhone4S does not respond

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.6
    • Fix Version/s: 2.5.5, 2.6.2
    • Component/s: Course
    • Labels:
    • Environment:
      iPhone 4s, Safari
    • Story Points (Obsolete):
      8
    • Sprint:
      FRONTEND Sprint 8

      Description

      On iPhone4S iOS7 Safari, the add/cancel button does not respond when its at the bottom most. Barely usuable.

      Instead the iOS bottom navigation bar appears

      But after a couple of random tries forcing the the activity chooser to scroll up then it works

      It works fine on Chrome

        Gliffy Diagrams

        1. photo_0.jpg
          30 kB
        2. photo_1.jpg
          32 kB
        3. photo_2.jpg
          33 kB

          Issue Links

            Activity

            Hide
            Jérôme Mouneyrac added a comment - - edited

            Basically all links or button at the bottom of a page in iOS7 safari won't work on iPhone because the iOS7 triggers the Safari iOS7 bottom bar instead of the web page elements.
            I just tested few minutes on Barbara's iPhone, imo it's a bad design choice from Apple, it must breaks many web apps on iPhone.

            PS: note that it is possible to gets the iOS7 bottom bar not displayed as an overlay (as shown on the picture). But it requires (at the moment) a set of steps that most people won't be able to reproduce/know.

            Show
            Jérôme Mouneyrac added a comment - - edited Basically all links or button at the bottom of a page in iOS7 safari won't work on iPhone because the iOS7 triggers the Safari iOS7 bottom bar instead of the web page elements. I just tested few minutes on Barbara's iPhone, imo it's a bad design choice from Apple, it must breaks many web apps on iPhone. PS: note that it is possible to gets the iOS7 bottom bar not displayed as an overlay (as shown on the picture). But it requires (at the moment) a set of steps that most people won't be able to reproduce/know.
            Hide
            moodle.com added a comment -

            The solution to this problem is not clear.

            It would be good to check if there is a screen resize event when this toolbar appears over the page content.

            If there is no event we can respond to then the solution, assuming we want to pursue one, would be a hack on the padding at the end of the page for this particular browser.

            Show
            moodle.com added a comment - The solution to this problem is not clear. It would be good to check if there is a screen resize event when this toolbar appears over the page content. If there is no event we can respond to then the solution, assuming we want to pursue one, would be a hack on the padding at the end of the page for this particular browser.
            Hide
            Frédéric Massart added a comment - - edited

            Disabling the fullscreen mode by removing the ability to scroll up and down when the window is opened might help. Unfortunately I do not have any iOS device to test this right now.

            The following article talks about that issue: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

            In a nutshell, the fullscreen mode (removing the toolbars) is enabled as soon as the user scrolls. Which I guess is always the case when the activity chooser is opened. Then the dead zone at the bottom triggers Safari to display the toolbar again. Then, if the scroll is locked, perhaps clicking on the buttons will not trigger the fullscreen mode any more.

            Show
            Frédéric Massart added a comment - - edited Disabling the fullscreen mode by removing the ability to scroll up and down when the window is opened might help. Unfortunately I do not have any iOS device to test this right now. The following article talks about that issue: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review In a nutshell, the fullscreen mode (removing the toolbars) is enabled as soon as the user scrolls. Which I guess is always the case when the activity chooser is opened. Then the dead zone at the bottom triggers Safari to display the toolbar again. Then, if the scroll is locked, perhaps clicking on the buttons will not trigger the fullscreen mode any more.
            Hide
            Jérôme Mouneyrac added a comment - - edited

            I don't have a iOS7 device but just for info I did a quick search and found these links:

            Basically we could test Fred suggestion, try if minimal-ui on iOS7.1 beta helps, detect the iOS toolbar (http://aaronmarkbrown.com/post/64909314714/detecting-ios-7-safari-interface) and move the activity chooser buttons above the iOS toolbar...

            Show
            Jérôme Mouneyrac added a comment - - edited I don't have a iOS7 device but just for info I did a quick search and found these links: http://stackoverflow.com/questions/18813476/is-it-possible-to-hide-the-address-bar-in-ios-7-safari http://theamazingweb.net/2013/12/19/minimal-ui-viewport-meta-tag/ Basically we could test Fred suggestion, try if minimal-ui on iOS7.1 beta helps, detect the iOS toolbar ( http://aaronmarkbrown.com/post/64909314714/detecting-ios-7-safari-interface ) and move the activity chooser buttons above the iOS toolbar...
            Hide
            Rossiani Wijaya added a comment - - edited

            While working on 2.5, I noticed the activity chooser is not working on iPhone4s. Instead of displaying the link to create activity, it uses the dropdown menu.

            This is occurring on ios7 for iphone 4s and 5s, ios6 for ipod touch, and android 4.1.2 phone. Reporting issue: MDL-43741.

            Show
            Rossiani Wijaya added a comment - - edited While working on 2.5, I noticed the activity chooser is not working on iPhone4s. Instead of displaying the link to create activity, it uses the dropdown menu. This is occurring on ios7 for iphone 4s and 5s, ios6 for ipod touch, and android 4.1.2 phone. Reporting issue: MDL-43741 .
            Hide
            CiBoT added a comment -
            Show
            CiBoT added a comment - Results for MDL-42980 Remote repository: git://github.com/rwijaya/moodle.git Remote branch MDL-42980 _m25 to be integrated into upstream MOODLE_25_STABLE Executed job http://integration.moodle.org/job/Precheck%20remote%20branch/552 Details: http://integration.moodle.org/job/Precheck%20remote%20branch/552/artifact/work/smurf.html Remote branch MDL-42980 _m26 to be integrated into upstream MOODLE_26_STABLE Executed job http://integration.moodle.org/job/Precheck%20remote%20branch/553 Details: http://integration.moodle.org/job/Precheck%20remote%20branch/553/artifact/work/smurf.html Remote branch MDL-42980 to be integrated into upstream master Executed job http://integration.moodle.org/job/Precheck%20remote%20branch/554 Details: http://integration.moodle.org/job/Precheck%20remote%20branch/554/artifact/work/smurf.html
            Hide
            Jérôme Mouneyrac added a comment -

            Thanks Rosie. I don't think it's enough in my opinion. This patch is going to add a padding for all iOS devices and versions when only iOS7 is the trouble (and only reported for iPhone).

            If you check the links I added in my previous comment, one guy tried to detect when the toolbar was displayed and so you could just add the padding when you detect that the toolbar is displayed. I didn't try his code (I have neither an iPad, nor an iPhone) but if it works it could be a solution.

            Also just by curiosity is this a bug on iPad too or does it only concern iPhones?

            Show
            Jérôme Mouneyrac added a comment - Thanks Rosie. I don't think it's enough in my opinion. This patch is going to add a padding for all iOS devices and versions when only iOS7 is the trouble (and only reported for iPhone). If you check the links I added in my previous comment, one guy tried to detect when the toolbar was displayed and so you could just add the padding when you detect that the toolbar is displayed. I didn't try his code (I have neither an iPad, nor an iPhone) but if it works it could be a solution. Also just by curiosity is this a bug on iPad too or does it only concern iPhones?
            Hide
            Jérôme Mouneyrac added a comment -

            In fact Rosie showed me on iPhone, the fix looks good. It's simple and works well. Maybe just make it specific to iPhone only. It looks a bit big on iPad - even though it makes it easier/faster to tap on the buttons

            Show
            Jérôme Mouneyrac added a comment - In fact Rosie showed me on iPhone, the fix looks good. It's simple and works well. Maybe just make it specific to iPhone only. It looks a bit big on iPad - even though it makes it easier/faster to tap on the buttons
            Hide
            Rossiani Wijaya added a comment -

            Thanks Jerome,

            I have fixed it specifically for iphone only.

            Submitting for integration review.

            Show
            Rossiani Wijaya added a comment - Thanks Jerome, I have fixed it specifically for iphone only. Submitting for integration review.
            Hide
            Dan Poltawski added a comment -

            I've reproduced this problem on iOS 7.1. We really should file a bug with apple about this.

            Show
            Dan Poltawski added a comment - I've reproduced this problem on iOS 7.1. We really should file a bug with apple about this.
            Hide
            Dan Poltawski added a comment -

            With the help of Damyon, we've produced a very contrived example to demonstrate the bug and i've filled a radar with apple: #15856104

            Show
            Dan Poltawski added a comment - With the help of Damyon, we've produced a very contrived example to demonstrate the bug and i've filled a radar with apple: #15856104
            Hide
            Dan Poltawski added a comment -

            Integrated to master, 25 and 26 - thanks Rosie

            Show
            Dan Poltawski added a comment - Integrated to master, 25 and 26 - thanks Rosie
            Hide
            Marina Glancy added a comment -

            Works great, thanks Rossi

            I've noticed though that on Android default browser there is an unattractive white border along right and bottom side of the screen that overlaps the popup and also partly overlaps close ( X ) button and "Add" and "Cancel" buttons

            Show
            Marina Glancy added a comment - Works great, thanks Rossi I've noticed though that on Android default browser there is an unattractive white border along right and bottom side of the screen that overlaps the popup and also partly overlaps close ( X ) button and "Add" and "Cancel" buttons
            Hide
            Eloy Lafuente (stronk7) added a comment -

            I won't be saying "Thanks!" this week. I'm tired of it.

            For the good (and the bad), your code is now part of Moodle, the best LMS in the world. Hope you are contributing for that to continue being a fact (and not the opposite), sincerely.

            Just closing this as fixed, ciao

            PS: Just a bit of black/cruel humor, sorry, LOL!

            Show
            Eloy Lafuente (stronk7) added a comment - I won't be saying "Thanks!" this week. I'm tired of it. For the good (and the bad), your code is now part of Moodle, the best LMS in the world. Hope you are contributing for that to continue being a fact (and not the opposite), sincerely. Just closing this as fixed, ciao PS: Just a bit of black/cruel humor, sorry, LOL!

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Agile