CSS Broken after Upgrade
Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.
Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Symptoms
- The CSS from pages such as Administration pages and Dashboards gets broken after an upgrade:
The following may appear in the
atlassian-jira.log
:2011-08-22 22:35:21,268 http-8080-3 ERROR [500ErrorPage.jsp] Exception caught in 500 page ({name:"ParseError", message:"Syntax Error on line 9", filename:"dynamic:lookandfeel.less", line:9, column:0, extract:["@topTxtColour: #4C4C4C;", "@textHeadingColour: #black0;", "@faviconUrl: \"/images/icons/favicon.png\";"]}) java.lang.RuntimeException: ({name:"ParseError", message:"Syntax Error on line 9", filename:"dynamic:lookandfeel.less", line:9, column:0, extract:["@topTxtColour: #4C4C4C;", "@textHeadingColour: #black0;", "@faviconUrl: \"/images/icons/favicon.png\";"]}) at com.atlassian.jira.web.less.LessTransformer$LessCompiler.compile(LessTransformer.java:298) at com.atlassian.jira.web.less.LessTransformer$LessResource.transform(LessTransformer.java:170) ... Caused by: org.mozilla.javascript.JavaScriptException: [object Object] (setup-env.js#44) at org.mozilla.javascript.gen.c1._c4(setup-env.js:44) at org.mozilla.javascript.gen.c1.call(setup-env.js) at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:97) at org.mozilla.javascript.gen.c2._c44(less-concat.js:644) at org.mozilla.javascript.gen.c2.call(less-concat.js) ...
2015-06-24 11:17:04,495 http-bio-8080-exec-22 WARN anonymous 677x290x6 3exfhk 10.163.8.71,127.0.0.1 /s/f902c82c4eb2d1bfd0c6d426707e7ac3-CDN/en_USxd8w3c/64020/11/7d3affa65a9e7addae635cd9ee21b03b/_/download/contextbatch/css/atl.dashboard,atl.general,jira.global/batch.css [cache.filecache.impl.CachedFile] Problem caching to disk, skipping cache for this entry com.atlassian.lesscss.LessSyntaxException: error evaluating function `hue`: Cannot find function toHSL in object [object Object]. at com.atlassian.lesscss.RhinoLessCompiler.newLessException(RhinoLessCompiler.java:86) at com.atlassian.lesscss.RhinoLessCompiler.compile(RhinoLessCompiler.java:72) at com.atlassian.plugins.less.LessResource.transform(LessResource.java:37) at com.atlassian.plugin.webresource.transformer.CharSequenceDownloadableResource$1.apply(CharSequenceDownloadableResource.java:49) at com.atlassian.plugin.webresource.transformer.CharSequenceDownloadableResource$1.apply(CharSequenceDownloadableResource.java:46) (...) at java.lang.Thread.run(Unknown Source) Caused by: org.mozilla.javascript.JavaScriptException: [object Object] (/js/less/less-rhino.js#756) at org.mozilla.javascript.gen._js_less_less_rhino_js_1._c_anonymous_43(/js/less/less-rhino.js:756) at org.mozilla.javascript.gen._js_less_less_rhino_js_1.call(/js/less/less-rhino.js) (...) at org.mozilla.javascript.gen._js_less_less_patches_js_2.call(/js/less/less-patches.js) at com.atlassian.lesscss.RhinoLessCompiler.compile(RhinoLessCompiler.java:69) ... 181 more
Diagnosis
JIRA is upgraded using the steps in Upgrading JIRA Manually with an in-database upgrade, rather than the XML export/import.
Cause
- By default, JIRA will scale favicon linked by URL after a logo URL has been referred via Administration > System > Look And Feel.
- If using in-database upgrade method and have a logo that is a URL rather than a local resource, the referred URL will not be scaled and this causes the same problem.
Resolution
- Navigate to Administration > Look And feel > Edit Configuration.
- Save the current configuration (save it as a PDF).
- Reset the default Logo and Favicon.
- Reset all modified Colors and Gadget Colors by clicking on the Revert buttons for each modified color.
- This will repair the CSS - to verify this test the page that previously caused problems to verify it renders correctly.
- Add the logo's link again with Upload Logo and also add the Favicon if it was replaced.
- Set any customized colors back to what they were.
- Test to verify the instance is in the expected state and all is working.