Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-42974

UI: Modal dialogs do not work in IE8

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 2.6, 2.7.2
    • Fix Version/s: 2.7.3
    • Component/s: JavaScript
    • Labels:
    • Testing Instructions:
      Hide

      0. Ensure conditional availability is turned on at server level.

      Using IE8:
      1. Add a new Page.
      2. Click the 'Insert image' button in editor.
      EXPECTED: Image dialog appears and rest of page is greyed out (after slight flicker).
      BEFORE FIX: Image dialog is greyed out and you can't click things in it.

      3. Click the 'browser' button to open the file picker.
      EXPECTED: File manager appears on top of image dialog, which is greyed out now. (NOTE: Due to a separate IE8 bug, the left-hand part of the file picker appears transparent, but is still usable.)

      4. Twiddle around with pages on the file picker as necessary, then upload an image and OK it.
      EXPECTED: The image dialog is now available again.

      5. OK the image dialog
      EXPECTED: It closes and the page is now available again.
      NOTE: Using Atto, the image will not actually be added to the editor. This is an unrelated issue.

      6. Expand 'Restrict access'
      7. Click 'Add a restriction'.
      EXPECTED: Dialog appears and rest of page is greyed out, as above.

      8. Click 'Date' button to add a date restriction.
      EXPECTED: Dialog goes away successfully.

      9. Using a modern browser, repeat these steps.
      EXPECTED: Same results except no flicker. (I.e. behaviour is unchanged from before.)

      Show
      0. Ensure conditional availability is turned on at server level. Using IE8: 1. Add a new Page. 2. Click the 'Insert image' button in editor. EXPECTED: Image dialog appears and rest of page is greyed out (after slight flicker). BEFORE FIX: Image dialog is greyed out and you can't click things in it. 3. Click the 'browser' button to open the file picker. EXPECTED: File manager appears on top of image dialog, which is greyed out now. (NOTE: Due to a separate IE8 bug, the left-hand part of the file picker appears transparent, but is still usable.) 4. Twiddle around with pages on the file picker as necessary, then upload an image and OK it. EXPECTED: The image dialog is now available again. 5. OK the image dialog EXPECTED: It closes and the page is now available again. NOTE: Using Atto, the image will not actually be added to the editor. This is an unrelated issue. 6. Expand 'Restrict access' 7. Click 'Add a restriction'. EXPECTED: Dialog appears and rest of page is greyed out, as above. 8. Click 'Date' button to add a date restriction. EXPECTED: Dialog goes away successfully. 9. Using a modern browser, repeat these steps. EXPECTED: Same results except no flicker. (I.e. behaviour is unchanged from before.)
    • Affected Branches:
      MOODLE_26_STABLE, MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_27_STABLE
    • Pull 2.7 Branch:
      MDL-42974-m27
    • Pull Master Branch:
      MDL-42974-master

      Description

      File Picker does not appear to load correctly in IE8

      It does appear but with no options on the clean theme.

      When using on an alternative theme appears in the background.

      Tried the various suggested code changes for IE9/10 but no change.

        Gliffy Diagrams

          Attachments

            Activity

            Hide
            danmarsden Dan Marsden added a comment -

            support for IE 8 was dropped in 2.6 - IE 9 or higher is required.
            http://docs.moodle.org/dev/Moodle_2.6_release_notes#Requirements

            we do still support IE 8 in 2.5 though.

            Show
            danmarsden Dan Marsden added a comment - support for IE 8 was dropped in 2.6 - IE 9 or higher is required. http://docs.moodle.org/dev/Moodle_2.6_release_notes#Requirements we do still support IE 8 in 2.5 though.
            Hide
            marina Marina Glancy added a comment -

            Thanks for reporting that
            I'm closing this issue for the reasons Dan mentioned above. Please feel free to reopen if you notice the similar problem on Moodle 2.5.

            Show
            marina Marina Glancy added a comment - Thanks for reporting that I'm closing this issue for the reasons Dan mentioned above. Please feel free to reopen if you notice the similar problem on Moodle 2.5.
            Hide
            jp76 Jason Platts added a comment -

            I came across this tracker issue when noticing the same problem - file picker doesn't show at all in IE8 in 2.6.

            To fix I added the following CSS to my theme:
            .ie8 div.yui3-widget.yui3-panel.moodle-dialogue.filepicker .moodle-dialogue-content {
            height: auto !important;
            }

            Hope that is helpful to anyone that experiences the same issue and happens upon this page.

            Show
            jp76 Jason Platts added a comment - I came across this tracker issue when noticing the same problem - file picker doesn't show at all in IE8 in 2.6. To fix I added the following CSS to my theme: .ie8 div.yui3-widget.yui3-panel.moodle-dialogue.filepicker .moodle-dialogue-content { height: auto !important; } Hope that is helpful to anyone that experiences the same issue and happens upon this page.
            Hide
            pavel.holecek Pavel Holeček added a comment -

            I have recently upgraded Moodle to 2.6.1+ at our university and received complaints from teachers that they are not able to upload any files to Moodle anymore. Unfortunately, Windows XP are still used at our university on many computers and that is why we are not able to use IE 9 or newer. So the only option is either to downgrade Moodle (no), or to force the teachers to migrate to Firefox (not very realistic).

            I think, that dropping the IE8 support was a mistake.

            Show
            pavel.holecek Pavel Holeček added a comment - I have recently upgraded Moodle to 2.6.1+ at our university and received complaints from teachers that they are not able to upload any files to Moodle anymore. Unfortunately, Windows XP are still used at our university on many computers and that is why we are not able to use IE 9 or newer. So the only option is either to downgrade Moodle (no), or to force the teachers to migrate to Firefox (not very realistic). I think, that dropping the IE8 support was a mistake.
            Hide
            pavel.holecek Pavel Holeček added a comment -

            To Jason Platts: Thank you. Your fix helped. We are able to add files to courses again. I think that this fix should be included in the Moodle.

            Show
            pavel.holecek Pavel Holeček added a comment - To Jason Platts: Thank you. Your fix helped. We are able to add files to courses again. I think that this fix should be included in the Moodle.
            Hide
            timhunt Tim Hunt added a comment -

            I know we don't officially support IE8, but when people scratch their own itch, and fix serious IE8 breakage, we should integrate it. So, I have made branches for

            Show
            timhunt Tim Hunt added a comment - I know we don't officially support IE8, but when people scratch their own itch, and fix serious IE8 breakage, we should integrate it. So, I have made branches for Jason's fix here, and The fix from this forum post: https://moodle.org/mod/forum/discuss.php?d=264098#p1164673
            Hide
            cibot CiBoT added a comment -

            Fails against automated checks.

            Checked MDL-42974 using repository: git://github.com/timhunt/moodle.git

            More information about this report

            Show
            cibot CiBoT added a comment - Fails against automated checks. Checked MDL-42974 using repository: git://github.com/timhunt/moodle.git MOODLE_26_STABLE (branch: MDL-42974_26 | CI Job ) Error: Unable to fetch information from MDL-42974 _26 branch at git://github.com/timhunt/moodle.git. MOODLE_27_STABLE (branch: MDL-42974_27 | CI Job ) Coding style problems found master (branch: MDL-42974 | CI Job ) Coding style problems found More information about this report
            Hide
            jp76 Jason Platts added a comment -

            Starting peer review.

            Note 26 branch is missing from GitHub.

            Show
            jp76 Jason Platts added a comment - Starting peer review. Note 26 branch is missing from GitHub.
            Hide
            timhunt Tim Hunt added a comment -

            Oops! yes, I forgot to push that.

            Show
            timhunt Tim Hunt added a comment - Oops! yes, I forgot to push that.
            Hide
            jp76 Jason Platts added a comment -

            Code looks fine, but I couldn't see the fix working in IE8. JS changes don't seem to fix the problem (in 2.7 at least).

            Show
            jp76 Jason Platts added a comment - Code looks fine, but I couldn't see the fix working in IE8. JS changes don't seem to fix the problem (in 2.7 at least).
            Hide
            timhunt Tim Hunt added a comment -

            Pity, so not simple. I'll leave this alone for now.

            Show
            timhunt Tim Hunt added a comment - Pity, so not simple. I'll leave this alone for now.
            Hide
            lersheng Hansen Ler added a comment -

            Hi Jason,

            Did you try to clear your cache? I have tested it for the Quiz > Start Attempt and it works!!!!
            The dialogue is above the mask. My testing machine is Windows XP, IE8.

            Should be fine. Let me know which part did u test and it is not working.

            Show
            lersheng Hansen Ler added a comment - Hi Jason, Did you try to clear your cache? I have tested it for the Quiz > Start Attempt and it works!!!! The dialogue is above the mask. My testing machine is Windows XP, IE8. Should be fine. Let me know which part did u test and it is not working.
            Hide
            jp76 Jason Platts added a comment -

            Hansen, I tested on a clean install of Moodle 2.7.2 on a virtual copy of IE8 (on Win7).
            I can confirm that I cleared caches as I could see the new js being loaded in the developer panel debug.

            I had the mask showing above the dialogue both when choosing an image in atto and on the quiz confirmation.

            Perhaps some further testing is required to verify if it works or not.

            Show
            jp76 Jason Platts added a comment - Hansen, I tested on a clean install of Moodle 2.7.2 on a virtual copy of IE8 (on Win7). I can confirm that I cleared caches as I could see the new js being loaded in the developer panel debug. I had the mask showing above the dialogue both when choosing an image in atto and on the quiz confirmation. Perhaps some further testing is required to verify if it works or not.
            Hide
            lersheng Hansen Ler added a comment - - edited

            Hi Jason,

            Works fine for me.
            The changes Tim made is alright:
            https://github.com/timhunt/moodle/compare/master...MDL-42974

            You can see our discussions here:
            https://moodle.org/mod/forum/discuss.php?d=264098#p1165880

            I am using Moodle 2.7.1+ (Build: 20140731), so unless there is some fundamental changes to the main script, there should not be a problem...

            EDIT: Guys, I did more test and found out my z-index for modal is set to 0, that is why it works. Discovered that the mask must use z-index =<4029 to work.

            Show
            lersheng Hansen Ler added a comment - - edited Hi Jason, Works fine for me. The changes Tim made is alright: https://github.com/timhunt/moodle/compare/master...MDL-42974 You can see our discussions here: https://moodle.org/mod/forum/discuss.php?d=264098#p1165880 I am using Moodle 2.7.1+ (Build: 20140731), so unless there is some fundamental changes to the main script, there should not be a problem... EDIT: Guys, I did more test and found out my z-index for modal is set to 0, that is why it works. Discovered that the mask must use z-index =<4029 to work.
            Hide
            quen Sam Marshall added a comment -

            OK, Tim and I have taken this on again and come up with a fix that actually works. Basically the fix is that in IE8, if you toggle the 'position:fixed' on the lightbox, it will then honour the z-index values.

            Obviously this is a horrible hack and causes a slight flicker but for those many users still using IE8, this does make it actually work, and without any cost/risk to users of more modern browsers. (Note that this is not the only IE8 problem, other things are still broken, but I was able to at least use it albeit with some cosmetic issues. Not intending to fix every single IE8 problem in this issue...!)

            Note that this fix is for 2.7 onwards. The change does not seem to be necessary in 2.6 as modal dialogues work OK there already (incidentally I did try applying this change, and it doesn't hurt), although in 2.6, other things are broken and the filepicker still doesn't work at all. (Sorry, going to leave that to others - let's get the current versions working though.)

            I'm going to do a little more testing before submitting this.

            Show
            quen Sam Marshall added a comment - OK, Tim and I have taken this on again and come up with a fix that actually works. Basically the fix is that in IE8, if you toggle the 'position:fixed' on the lightbox, it will then honour the z-index values. Obviously this is a horrible hack and causes a slight flicker but for those many users still using IE8, this does make it actually work, and without any cost/risk to users of more modern browsers. (Note that this is not the only IE8 problem, other things are still broken, but I was able to at least use it albeit with some cosmetic issues. Not intending to fix every single IE8 problem in this issue...!) Note that this fix is for 2.7 onwards. The change does not seem to be necessary in 2.6 as modal dialogues work OK there already (incidentally I did try applying this change, and it doesn't hurt), although in 2.6, other things are broken and the filepicker still doesn't work at all. (Sorry, going to leave that to others - let's get the current versions working though.) I'm going to do a little more testing before submitting this.
            Hide
            quen Sam Marshall added a comment -

            Requesting peer review. Tim, could you do this one please since you are definitely very familiar with it?

            Show
            quen Sam Marshall added a comment - Requesting peer review. Tim, could you do this one please since you are definitely very familiar with it?
            Hide
            cibot CiBoT added a comment -

            +1 code verified against automated checks.

            Checked MDL-42974 using repository: https://github.com/sammarshallou/moodle.git

            More information about this report

            Show
            cibot CiBoT added a comment - +1 code verified against automated checks. Checked MDL-42974 using repository: https://github.com/sammarshallou/moodle.git MOODLE_27_STABLE (branch: MDL-42974-m27 | CI Job ) master (branch: MDL-42974-master | CI Job ) More information about this report
            Hide
            timhunt Tim Hunt added a comment -

            Yep. This is certainly a horrible hack, but it works, and I think it is better than leaving things completely broken in IE8, so submitting for integration.

            Show
            timhunt Tim Hunt added a comment - Yep. This is certainly a horrible hack, but it works, and I think it is better than leaving things completely broken in IE8, so submitting for integration.
            Hide
            poltawski Dan Poltawski added a comment -

            The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

            TIA and ciao

            Show
            poltawski Dan Poltawski added a comment - The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week. TIA and ciao
            Hide
            quen Sam Marshall added a comment -

            Rebased both branches on current. (No changes.)

            Show
            quen Sam Marshall added a comment - Rebased both branches on current. (No changes.)
            Hide
            cibot CiBoT added a comment -

            Moving this issue to current integration cycle, will be reviewed soon. Thanks for the hard work!

            Show
            cibot CiBoT added a comment - Moving this issue to current integration cycle, will be reviewed soon. Thanks for the hard work!
            Hide
            samhemelryk Sam Hemelryk added a comment -

            Thanks for sharing your fix for this guys! It looked spot on to me and I've pulled it in now.

            Show
            samhemelryk Sam Hemelryk added a comment - Thanks for sharing your fix for this guys! It looked spot on to me and I've pulled it in now.
            Hide
            derekcx Derek Chirnside added a comment -

            Just curious. Obviously a lot of jargon here that goes right over my head.
            But one thing I have been curious about over the years.
            What is it about a hack that makes it 'horrible'??

            -Derek

            Show
            derekcx Derek Chirnside added a comment - Just curious. Obviously a lot of jargon here that goes right over my head. But one thing I have been curious about over the years. What is it about a hack that makes it 'horrible'?? -Derek
            Hide
            timhunt Tim Hunt added a comment -

            Derek, it seemed a bit off-topic to answer here, so I wrote a blog post: http://tjhunt.blogspot.co.uk/2014/09/what-makes-something-horrible-hack.html

            Show
            timhunt Tim Hunt added a comment - Derek, it seemed a bit off-topic to answer here, so I wrote a blog post: http://tjhunt.blogspot.co.uk/2014/09/what-makes-something-horrible-hack.html
            Hide
            johno John Okely added a comment -

            Thanks all. Things working as expected in 27 and master. Testing passed.

            A follow up issue should be created to fix it in 2.6.

            Show
            johno John Okely added a comment - Thanks all. Things working as expected in 27 and master. Testing passed. A follow up issue should be created to fix it in 2.6.
            Hide
            poltawski Dan Poltawski added a comment -

            Thanks for your contribution, this change is now upstream!

            Show
            poltawski Dan Poltawski added a comment - Thanks for your contribution, this change is now upstream!

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  10/Nov/14