Uploaded image for project: 'Hippo CMS'
  1. Hippo CMS
  2. CMS-11671

Reduce visual difference between Chrome and Firefox

    XMLWordPrintable

Details

    • Bug
    • Status: Open
    • Normal
    • Resolution: Unresolved
    • 13.1.0
    • None
    • None
    • None

    Description

      First, we should fix the blurry icons (CMS and ChannelManager) in Firefox (maybe Edge as well). This is only visible on regular low dpi screens, which is still the norm. I found a working solution here

      svg:not(:root) { 
        overflow:hidden; 
        transform: translate(0,0); 
      }

      This fix moves the blurry icons a bit, which triggered me to do some visual diffing between chrome and firefox on low&high dpi screens.

      The biggest difference I found in the CMS is that the line-height is not applied in the same manner between Chrome and Firefox.

      Also, things like shadows (see the channel-manager empty container) and font colors are different.

      For the login page, I've updated the normalize.css to the latest version, this might very well be the fix we are looking for with regards to the difference in line-height. This will require an update of the grunt build of the cms-api module (should be more/less the same as the cms-login module).

      I've attached some visual diff screenshots as a reference.

      Attachments

        1. diff-ff-lodpi-cms.png
          diff-ff-lodpi-cms.png
          255 kB
        2. diff-ff-lodpi-cm.png
          diff-ff-lodpi-cm.png
          229 kB
        3. diff-ff-hidpi-cms.png
          diff-ff-hidpi-cms.png
          781 kB
        4. diff-ff-hidpi-cm.png
          diff-ff-hidpi-cm.png
          640 kB
        5. diff-cr-lodpi-cms.png
          diff-cr-lodpi-cms.png
          244 kB
        6. diff-cr-lodpi-cm.png
          diff-cr-lodpi-cm.png
          202 kB
        7. diff-cr-hidpi-cms.png
          diff-cr-hidpi-cms.png
          778 kB
        8. diff-cr-hidpi-cm.png
          diff-cr-hidpi-cm.png
          605 kB
        9. diff-cr-ff-hi-cms-clear.png
          diff-cr-ff-hi-cms-clear.png
          375 kB
        10. diff-cr-ff-hi-cms-blurry.png
          diff-cr-ff-hi-cms-blurry.png
          358 kB
        11. diff-cr-ff-hi-cm-clear.png
          diff-cr-ff-hi-cm-clear.png
          417 kB
        12. diff-cr-ff-hi-cm-blurry.png
          diff-cr-ff-hi-cm-blurry.png
          418 kB

        Issue Links

          Activity

            People

              Unassigned Unassigned
              abogaart Arthur Bogaart
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated: