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

Dialogue headers are not styled correctly on IE10

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.6
    • Fix Version/s: 2.6.1
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide

      1/ Use IE10 with standard theme
      2/ Visit a moodle site and observe use the activity chooser or file picker
      3/ Examine the header of the JS dialogue which appears
      Expected result:
      The header looks same as on Safari/Chrome/FF

      Repeat tests in other browsers to ensure they remain the same.

      Show
      1/ Use IE10 with standard theme 2/ Visit a moodle site and observe use the activity chooser or file picker 3/ Examine the header of the JS dialogue which appears Expected result: The header looks same as on Safari/Chrome/FF Repeat tests in other browsers to ensure they remain the same.
    • Affected Branches:
      MOODLE_26_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-43084-master

      Description

      1/ Use IE10
      2/ Visit a moodle site and observe use the activity chooser or file picker
      3/ Examine the header of the JS dialogue which appears

      Expected result:
      The header looks same as on Safari/Chrome/FF

      Actual result:
      There is a grey untextured header which looks different to other browsers

        Gliffy Diagrams

          Attachments

            Activity

            Hide
            poltawski Dan Poltawski added a comment -

            See attached screenshots.

            Show
            poltawski Dan Poltawski added a comment - See attached screenshots.
            Hide
            andyjdavis Andrew Davis added a comment -

            The testing instructions probably want to specify the theme that is involved. It would be worth also checking a non-IE browser to make sure there are no side effects there.

            Otherwise, the change is fine. Submit for integration when you are ready.

            Show
            andyjdavis Andrew Davis added a comment - The testing instructions probably want to specify the theme that is involved. It would be worth also checking a non-IE browser to make sure there are no side effects there. Otherwise, the change is fine. Submit for integration when you are ready.
            Hide
            phalacee Jason Fowler added a comment -

            Thanks Andrew, updated the instructions, and submitting now.

            Show
            phalacee Jason Fowler added a comment - Thanks Andrew, updated the instructions, and submitting now.
            Hide
            stronk7 Eloy Lafuente (stronk7) added a comment -

            Just 2 notes (I'm not integrating this coz I'm unable to verify IE behavior:

            1) To integrator, whichever solution is applied it should go to 26_STABLE too (is marked as regression).
            2) It sounds to me that the Mozilla / Safari / Chrome support the official one since long ago. No matter of that, this seems to be a better alternative than current one: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients

            For your consideration, ciao

            Show
            stronk7 Eloy Lafuente (stronk7) added a comment - Just 2 notes (I'm not integrating this coz I'm unable to verify IE behavior: 1) To integrator, whichever solution is applied it should go to 26_STABLE too (is marked as regression). 2) It sounds to me that the Mozilla / Safari / Chrome support the official one since long ago. No matter of that, this seems to be a better alternative than current one: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients For your consideration, ciao
            Hide
            samhemelryk Sam Hemelryk added a comment - - edited

            I'm not going to act upon this issue but I will share my thoughts:

            This currently would get a -1 from me in favour of properly cleaning up those styles as follows:

            • Use background-colour and background-image explicitly rather than the shorthand background property.
            • Add browser support styles as illustrated in the link Eloy referenced *see note below.
            • Use the -ms-filter property for IE<10 rather than the filter property.

            Browser support of the standard "linear-gradient" syntax:

            Browser Firefox Chrome IE Opera Safari
            Version 16 26 10 12.10 537.27

            I believe we need browser specific syntax used as well as standard syntax because really its dead easy to cover the board here and some of those versions are still pretty recent.

            Show
            samhemelryk Sam Hemelryk added a comment - - edited I'm not going to act upon this issue but I will share my thoughts: This currently would get a -1 from me in favour of properly cleaning up those styles as follows: Use background-colour and background-image explicitly rather than the shorthand background property. Add browser support styles as illustrated in the link Eloy referenced *see note below. Use the -ms-filter property for IE<10 rather than the filter property. Browser support of the standard "linear-gradient" syntax: Browser Firefox Chrome IE Opera Safari Version 16 26 10 12.10 537.27 I believe we need browser specific syntax used as well as standard syntax because really its dead easy to cover the board here and some of those versions are still pretty recent.
            Show
            lazydaisy Mary Evans added a comment - http://msdn.microsoft.com/en-us/library/ie/hh801215%28v=vs.85%29.aspx
            Hide
            phalacee Jason Fowler added a comment -

            Hi Mary, yes, that is what caused this issue.

            Thanks for looking over this Sam, I thought the shortest patch would be the best, but after reading your comment, I agree that this should be handled differently.

            Show
            phalacee Jason Fowler added a comment - Hi Mary, yes, that is what caused this issue. Thanks for looking over this Sam, I thought the shortest patch would be the best, but after reading your comment, I agree that this should be handled differently.
            Hide
            phalacee Jason Fowler added a comment -

            Changed that, tested in IE9, IE10, Chrome, and Firefox. All working.

            Show
            phalacee Jason Fowler added a comment - Changed that, tested in IE9, IE10, Chrome, and Firefox. All working.
            Hide
            lazydaisy Mary Evans added a comment - - edited

            I think, if I am not mistaken, that...

             

             
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC');
            
            

            needs some punctuation marks for IE8 but without the ms and also the punctuation for IE5.5 - 7, like so...
             

            /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC')";
             
            /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC');
            
            

            You shouldn't need the !important either.

            Show
            lazydaisy Mary Evans added a comment - - edited I think, if I am not mistaken, that...     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); needs some punctuation marks for IE8 but without the ms and also the punctuation for IE5.5 - 7, like so...   /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC')";   /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); You shouldn't need the !important either.
            Hide
            phalacee Jason Fowler added a comment -

            I'm not sure how far back this needs to be ported, so I don't think we need to worry about the IE 5.5-7, and I tested it in IE9 (if this is 2.6/2.7 only, it won't need to handle IE8 either...

            Show
            phalacee Jason Fowler added a comment - I'm not sure how far back this needs to be ported, so I don't think we need to worry about the IE 5.5-7, and I tested it in IE9 (if this is 2.6/2.7 only, it won't need to handle IE8 either...
            Hide
            samhemelryk Sam Hemelryk added a comment -

            Thanks Jason - this has been integrated now.

            Show
            samhemelryk Sam Hemelryk added a comment - Thanks Jason - this has been integrated now.
            Hide
            dmonllao David Monllaó added a comment -

            It looks good and similar to FF, Chrome and Safari, the font changes slightly though. I've tried it in a Windows 7 with IE 10.

            Show
            dmonllao David Monllaó added a comment - It looks good and similar to FF, Chrome and Safari, the font changes slightly though. I've tried it in a Windows 7 with IE 10.
            Hide
            poltawski Dan Poltawski added a comment -

            Thanks for your contributions, this change is now upstream!

            “ If debugging is the process of removing software bugs, then programming must be the process of putting them in. ” - Edsger Dijkstra

            Show
            poltawski Dan Poltawski added a comment - Thanks for your contributions, this change is now upstream! “ If debugging is the process of removing software bugs, then programming must be the process of putting them in. ” - Edsger Dijkstra

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  13/Jan/14