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

CSS calc divided by does not survive minification

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Duplicate
    • Affects Version/s: 3.2
    • Fix Version/s: None
    • Component/s: HTML and CSS
    • Affected Branches:
      MOODLE_32_STABLE

      Description

      The following CSS in a plugins styles.css (not tested with themes) will not survive minification after purging caches:

      left: calc(50% - 15em / 2);
      left: calc(50% - 30px / 2);
      left: calc(50% - 50% / 2);

      There is a workaround, which is to do the last division calculation manually:

      left: calc(50% - 7.5em);
      left: calc(50% - 15px);
      left: calc(50% - 25%);

      However, sometimes it is nice to use calc for code readability- e.g.

      width:15%;
      left: calc(50% - 15% / 2);

      Because I have the width at 15% and I am using the same value but dividing it by 2 in the next line, it is more obvious what I am trying to achieve as opposed to just writing 7.5%

      Steps to replicate:

      In any plugin with a styles.css file add:

      .bugtest {
          left: calc(50% - 15em / 2);
          left: calc(50% - 30px / 2);
          left: calc(50% - 50% / 2);
          top: calc(50% - 7.5em);
          top: calc(50% - 15px);
          top: calc(50% - 25%);
      }
      

      purge caches

      In network tab inspect css for styles.php / all - e.g:

      http://gthomas2moodle.dev/theme/styles.php/clean/1481275721/all

      Notice that the css for the .bugtest class contains the "top" attributes but not the "left" attributes.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                brudinie guy thomas
                Participants:
                Component watchers:
                Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón
              • Votes:
                2 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: