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

CSS calc divided by does not survive minification

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Minor Minor
    • None
    • 3.2
    • HTML and CSS
    • MOODLE_32_STABLE

      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.

            Unassigned Unassigned
            brudinie guy thomas
            Votes:
            2 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.