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

          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