This issue has been created
 
 
XWiki Platform / cid:jira-generated-image-avatar-08cae7dc-0bb7-4e5b-81d5-f70678e140da XWIKI-22206 Open

Minify CSS removes spaces from SVG background-image

 
View issue   ยท   Add comment
 

Issue created

 
cid:jira-generated-image-avatar-b48116c5-3fb0-4f26-b089-4929b3a98cbe JP Kleijn created this issue on 01/Jun/24 10:24
 
Summary: Minify CSS removes spaces from SVG background-image
Issue Type: cid:jira-generated-image-avatar-08cae7dc-0bb7-4e5b-81d5-f70678e140da Bug
Affects Versions: 16.4.0
Assignee: Unassigned
Components: LESS
Created: 01/Jun/24 10:24
Environment: Personal
------------------
Windows 7
Firefox

Xwiki
------------------
Debian
Tomcat9
MariaDB
Nginx
Labels: css minify svg-background-image
Priority: cid:jira-generated-image-static-minor-0a32d81e-570d-43ec-a7fa-cf063a60265b Minor
Reporter: JP Kleijn
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.