Chrome css broken after upgrading to 8.5.1 LTS

[Mark Keymer]

I have a very unusual issue after upgrading to 8.5.1 LTS. This css on line 45: 

--a11y-patterns-svg--blue-default: url(data:image/svg+xml,%3Csvg width='24' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath stroke='%23FFF' stroke-width='3.5' opacity='.8' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-17 3L4 24l-21 21'/%3E%3Cpath stroke='%23FFF' stroke-width='3.5' opacity='.6' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-9 2l22 22-22 22'/%3E%3Cpath stroke='%23FFF' stroke-width='3.5' opacity='.4' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M0 2l22 22L0 46'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--blue-medium:url(data:image/svg+xml,%3Csvg width='20' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath stroke='%23FFF' stroke-width='3.5' opacity='.8' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-15 2L7 24l-22 22'/%3E%3Cpath stroke='%23FFF' stroke-width='3.5' opacity='.5' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-6 2l22 22-22 22'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--blue-tiny-inverted:url(data:image/svg+xml,%3Csvg width='14' height='42' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h14v42H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath stroke='%230052CC' stroke-width='3' opacity='.8' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-17.5-1l22 22-22 22'/%3E%3Cpath stroke='%230052CC' stroke-width='3' opacity='.5' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-10.5-1l22 22-22 22'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--blue-tiny:url(data:image/svg+xml,%3Csvg width='14' height='42' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h14v42H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath stroke='%23FFF' stroke-width='3' opacity='.8' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-17.5-1l22 22-22 22'/%3E%3Cpath stroke='%23FFF' stroke-width='3' opacity='.5' stroke-linecap='round' stroke-linejoin='round' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' d='M-10.5-1l22 22-22 22'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--green-default:url(data:image/svg+xml,%3Csvg width='24' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='18' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='18' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='18' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='18' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='36' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--green-medium:url(data:image/svg+xml,%3Csvg width='20' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='6' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' y='36' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(/s/lueu5p/9012/1v6tx9j/2.2.4/_/download/resources/com.atlassian.plugins.issue-status-plugin:issue-status-resources/%23b)' x='12' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--green-tiny-inverted:url(data:image/svg+xml,%3Csvg width='12' height='42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300875A' fill-rule='evenodd'%3E%3Crect opacity='.8' y='18' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='24' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='30' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='12' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E);--a11y-patterns-svg--green-tiny:url(data:image/svg+xml,%3Csvg width='12' height='42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='evenodd'%3E%3Crect opacity='.8' y='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='12' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='18' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='24' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='30' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' x='6' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E)}

from (https://kb.viviotech.net/s/3a416e8b724787e5a29136f3a8aa7487-CDN/lueu5p/9012/1v6tx9j/263b9ddec8021feed753a9f55b0649c2/_/download/contextbatch/css/atl.confluence.plugins.pagetree-desktop,main,viewcontent,atl.general,page,atl.comments,-_super/batch.css?cefp_collab_enabled=true&cefp_ed_perm=false&cefp_is_admin=false&gatekeeper-ui-v2=true&highlightactions=true&hostenabled=true) is causing my site to load incorrectly on any chrome based browser (I've tried Chrome, Vivaldi, and Edge). However, Firefox works fine. 

I narrowed down the problem to the "--a11y-patterns-svg--green-tiny" css definition. If I move it to a new line, chrome works. 

If I take this css out, using dev tools, the site loads correctly.

Here's a snippet of the site w/ the css in place

and without

How can I track down a fix for this?

[Mark Keymer · Accepted solution]

I found a fix.

1. I decompressed the com.atlassian.plugins.issue-status-plugin-2.2.4.jar
2. Manually added newlines and semi-colons after each --a11y-patterns-svg--... css attribute in these files
   1. css/a11y-patterns.less.css
   2. css/a11y-patterns.less
3. Updated the jar
4. Replaced the file in /opt/atlassian/confluence/confluence/WEB-INF/atlassian-bundled-plugins/
5. Restarted confluence
6. Fixed

[Andrii Maliuta]

Hello @Mark Keymer ,

Recompiling the OOB jar can be not the best option as these are changes to core functionality. It can be better to submit the issue to Atlassian so that they could check this.

As I can see, I have no such issue, so maybe this issue is on your side and some custom addons or changes you made influence this. You can generate Suppor tzip and send to Atlassian support to check and also yu can check your logs to find the root cause.

[Mark Keymer]

I understand that. We undid the custom changes that we made and they didn't affect a fix. We checked the logs. There was no indication of a problem. This is a client side issue.

[Mark Keymer]

It would seem that there is no support for the license that I have on that server specifically.

[Van Tor]

same UI problem using docker image at docker pull atlassian/confluence-server:8.5.1-ubuntu-jdk17, occurred in chrome, firefox and MS edge all browsers.