Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-22206

Minify CSS removes spaces from SVG background-image

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Major
    • None
    • 16.4.0
    • LESS, Skin - Skinx
    • Personal
      ------------------
      Windows 7
      Firefox

      Xwiki
      ------------------
      Debian
      Tomcat9
      MariaDB
      Nginx
    • Unknown

    Description

      (component LESS chosen for closest match)

      I have noticed a problem with CSS minification and the use of SVG background images.
      If the minification is turned on, the spaces are removed from the SVG data. When turned off the problem disappears. This issue behaves a bit like another issue on JIRA, CSS minification removes spaces around operator in calc expressions. Unfortunately the workaround I posted there is not applicable in this case.

      Page content for testcase:

      {{velocity}}
      #set($discard = $xwiki.ssx.use('minifytest.WebHome', {'minify' : false}))
      
      {{html wiki="true" clean="false"}}
      <div id="testbox" class="testclass">
      </div>
      {{/html}}
      
      {{/velocity}}

      Object (Stylesheet Extension) content for testcase:

      #testbox {
        position: relative;
        display: block;
        border: 1px solid #000000;
        margin-top: calc("100px - 0px");
        width: 20rem;
        height: 20rem;
        top: 1rem;
        left: 1rem;
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M585.6,123.3c0-75.5-29.1-113.3-87-113.3c-57.8,0-86.9,37.8-86.9,113.3c0,14.1,1.8,29,5.3,44.8L459,368.4c3.4,17.6,5.3,30.6,5.3,39.4c0,10.5-4.4,15.9-13.2,15.9c-5.3,0-18.4-9.9-39.5-29.4l-152.7-144c-31.6-30.2-66.7-45.3-105.4-45.3c-58,0-86.9,25.6-86.9,76.7c0,49.4,34.5,87.3,103.5,113.9l196.5,74c30.1,10.6,45.1,21.2,45.1,31.7c0,7-15,16.8-45.1,29.2l-196.5,74c-69,26.6-103.5,65.4-103.5,116.6c0,51,28.1,76.7,84.3,76.7c38.6,0,74.6-15.9,108-47.6L411.7,608c21.1-19.3,34.2-29,39.5-29c8.8,0,13.2,5.2,13.2,15.7c0,8.8-1.9,22.1-5.3,39.6L417,834.6c-3.5,15.7-5.3,30.6-5.3,44.6c0,74,29,110.9,86.9,110.9c58,0,87-36.9,87-110.9c0-12.2-1.9-27-5.4-44.6l-39.4-200.2l-5.4-31.7v-10.4c0-8.8,4.4-13.1,13.3-13.1c5.2,0,18.4,9.7,39.4,29l152.9,142.2c33.3,31.7,68.4,47.6,105.3,47.6c58,0,87-26.3,87-79.1c0-49.1-34.6-87-103.5-113.2l-199.1-73.9c-30-12.3-45-22-45-29c0-8.8,15-19.3,45-31.6l199.1-73.8c68.9-26.3,103.5-65,103.5-115.9c0-50.9-29.1-76.4-87-76.4c-36.9,0-72,15.8-105.3,47.4L588.2,394.7c-21,19.4-34.2,29.1-39.4,29.1c-8.9,0-13.3-4.4-13.3-13.3l44.8-242.4C583.8,150.5,585.6,135.6,585.6,123.3L585.6,123.3z' fill='%23333'/%3E%3C/svg%3E");
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
      } 

      If the minify setting on the page content is set to TRUE, the SVG image disappears.

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              JP Kleijn JP Kleijn
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated: