CSS Broken after Upgrade
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. 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
Summary
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:1 2 3 4 5 6 7 8 9 10 11 122011-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) ...1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 162015-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.
Solution
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.
Was this helpful?