Moodle
  1. Moodle
  2. MDL-32326

IE9 Dock text displays blurry and un-readable

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.2.2
    • Fix Version/s: 2.2.6, 2.3.3
    • Component/s: Navigation
    • Labels:
    • Testing Instructions:
      Hide
      1. On stable using IE8 and IE9 have a look at the title of a docked block. Note how clear the text is (or isn't, whatever)
      2. On integration using IE8 and IE9 look again. Check that things are at least as clear as they were. Hopefully they will be clearer, although they won't be perfect.
      3. Test on all supported browsers that the docked title still works, looks fine, and is readable.
      Show
      On stable using IE8 and IE9 have a look at the title of a docked block. Note how clear the text is (or isn't, whatever) On integration using IE8 and IE9 look again. Check that things are at least as clear as they were. Hopefully they will be clearer, although they won't be perfect. Test on all supported browsers that the docked title still works, looks fine, and is readable.
    • Affected Branches:
      MOODLE_22_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull Master Branch:
      wip-MDL-32326-m24
    • Rank:
      39145

      Description

      There is a problem with IE9 and the dock where the rotated text will appear blurry. This has something to do with the image transform and loss of the anti-alias. Anyway, IE9 now also supports SVG so a small tweak to the code will fix the problem. However, a move to the css3 transform might be the next move away from SVG but that is up to you guys, but I will forward the code when I get to it anyway.

      There are a few images attached of the before and after with IE9 and IE8 as well as the patch.

      1. dock-font-ie-fix-use-another-font.diff
        0.9 kB
        Kirill Astashov
      2. ie9-fix.patch
        0.5 kB
        David Binney
      1. ie8-after-update.png
        26 kB
      2. ie8-before-update.png
        26 kB
      3. ie9-after-update.png
        45 kB
      4. ie9-before-update.png
        46 kB

        Issue Links

          Activity

          Hide
          David Binney added a comment -

          Screenshots

          Show
          David Binney added a comment - Screenshots
          Hide
          David Binney added a comment -

          patch file for the fix.

          Show
          David Binney added a comment - patch file for the fix.
          Hide
          Gilles-Philippe Leblanc added a comment - - edited

          The problem occurs if a background color is not defined for versions 8 and 9.
          The proposed solution allows to make IE9 readable but anti-aliasing is not perfect. It is also not for SVG unless you add the text-rendering property:

          dock.js
          txt.setAttribute('text-rendering','geometricPrecision');
          

          This property works for recent versions of Firefox, Chrome and Safari but does not work for Internet Explorer 9. To test with IE10 but if my assumption is correct, it should be supported.

          The current filter specific to IE (writing-mode: tb-rl; filter: flipv flipH), combined with a background-color provides better anti-aliasing rendering than SVG without text-rendering. That is why I advise is to leave the command:

           if (Y.UA.ie> 7) {

          or specify only the version of IE 8 and 9, if we assume that the text-rendering property will be supported with version 10 and later:

           if (Y.UA.ie == 8 | | Y.UA.ie == 9) {
          Show
          Gilles-Philippe Leblanc added a comment - - edited The problem occurs if a background color is not defined for versions 8 and 9. The proposed solution allows to make IE9 readable but anti-aliasing is not perfect. It is also not for SVG unless you add the text-rendering property : dock.js txt.setAttribute('text-rendering','geometricPrecision'); This property works for recent versions of Firefox, Chrome and Safari but does not work for Internet Explorer 9. To test with IE10 but if my assumption is correct, it should be supported. The current filter specific to IE (writing-mode: tb-rl; filter: flipv flipH), combined with a background-color provides better anti-aliasing rendering than SVG without text-rendering. That is why I advise is to leave the command: if (Y.UA.ie> 7) { or specify only the version of IE 8 and 9, if we assume that the text-rendering property will be supported with version 10 and later: if (Y.UA.ie == 8 | | Y.UA.ie == 9) {
          Hide
          Kirill Astashov added a comment - - edited

          Here's another approach for your consideration.
          It uses Modern or Courier font for dock title in IE.
          See attached dock-font-ie-fix-use-another-font.diff

          Show
          Kirill Astashov added a comment - - edited Here's another approach for your consideration. It uses Modern or Courier font for dock title in IE. See attached dock-font-ie-fix-use-another-font.diff
          Hide
          Sam Hemelryk added a comment -

          Hi guys,

          There has been a bit of thought put into this and a few alternative solutions purposed here.
          I think really at the moment this is no perfect solution for this that is going to work across all browsers and with all themes.
          In regards to specific ideas, the forced use of a font or a background colour is a good solution, but it is a solution that should lie with the theme more than the dock. The dock can force themes but in doing so removes power from the themes. While thats not critical its something we try to avoid in normal Moodle development.
          I also had a play with the text-rendering attribute. At the end of the day while that does provide some benefit in some browsers it has two a noted disadvantage - it is not part of any CSS specification. Its use is not guaranteed and thus it is somewhat unreliable.
          The description suggests CSS3 which isn't a silly idea, and certainly if we can get rid of the SVG in favor of something simpler that would be great.

          Presently I am leaning to a two part solution:
          1. Stable branches we'll make the change suggested by David's ie9-fix.patch. While its still not perfect it is a notable improvement over the existing outcome and is backwards compatible + safe.
          2. Master I'll see about creating a CSS3 rotation solution and look to better alternatives for IE8. IE6 and 7 will stay as they are.

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi guys, There has been a bit of thought put into this and a few alternative solutions purposed here. I think really at the moment this is no perfect solution for this that is going to work across all browsers and with all themes. In regards to specific ideas, the forced use of a font or a background colour is a good solution, but it is a solution that should lie with the theme more than the dock. The dock can force themes but in doing so removes power from the themes. While thats not critical its something we try to avoid in normal Moodle development. I also had a play with the text-rendering attribute. At the end of the day while that does provide some benefit in some browsers it has two a noted disadvantage - it is not part of any CSS specification. Its use is not guaranteed and thus it is somewhat unreliable. The description suggests CSS3 which isn't a silly idea, and certainly if we can get rid of the SVG in favor of something simpler that would be great. Presently I am leaning to a two part solution: 1. Stable branches we'll make the change suggested by David's ie9-fix.patch. While its still not perfect it is a notable improvement over the existing outcome and is backwards compatible + safe. 2. Master I'll see about creating a CSS3 rotation solution and look to better alternatives for IE8. IE6 and 7 will stay as they are. Cheers Sam
          Hide
          Sam Hemelryk added a comment -

          Putting this up for peer-review now.
          Master branch has many changes, stable branches have a simple change.

          Show
          Sam Hemelryk added a comment - Putting this up for peer-review now. Master branch has many changes, stable branches have a simple change.
          Hide
          Dan Poltawski added a comment -

          Sending all 'waiting for peer review' issues to integration before freeze, as agreed in Integrators Meeting 19/10/12. We are doing this to ensure any 'integratable issues' will not got missed before freeze..

          Show
          Dan Poltawski added a comment - Sending all 'waiting for peer review' issues to integration before freeze, as agreed in Integrators Meeting 19/10/12. We are doing this to ensure any 'integratable issues' will not got missed before freeze..
          Hide
          Dan Poltawski added a comment -

          Hi Sam,

          Are you able to add testing instructions to this one?

          Cheers,
          Dan

          Show
          Dan Poltawski added a comment - Hi Sam, Are you able to add testing instructions to this one? Cheers, Dan
          Hide
          Sam Hemelryk added a comment -

          Done, thanks Dan

          Show
          Sam Hemelryk added a comment - Done, thanks Dan
          Hide
          Dan Poltawski added a comment -

          Thanks Sam, i've integrated this now.

          Show
          Dan Poltawski added a comment - Thanks Sam, i've integrated this now.
          Hide
          David Monllaó added a comment -

          It passes in 22, 23 and master.

          Using a Win7 virutal machine, I can see the difference with IE 9 with and without the patch, IE8 looks good with and without the patch.

          Also I've noticed that, in master, the font style has changed a bit in all browsers, for example Win7 + Chrome, after talking with Sam it's ok to pass it.

          Show
          David Monllaó added a comment - It passes in 22, 23 and master. Using a Win7 virutal machine, I can see the difference with IE 9 with and without the patch, IE8 looks good with and without the patch. Also I've noticed that, in master, the font style has changed a bit in all browsers, for example Win7 + Chrome, after talking with Sam it's ok to pass it.
          Hide
          Dan Poltawski added a comment -

          Hurray!

          You did it, congratulations! You have on Mojito credit to redeem after the release of Moodle 2.4

          Show
          Dan Poltawski added a comment - Hurray! You did it, congratulations! You have on Mojito credit to redeem after the release of Moodle 2.4

            People

            • Votes:
              3 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: