Details
-
Bug
-
Resolution: Unresolved
-
Major
-
None
-
16.4.0
-
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.