Chrome css broken after upgrading to 8.5.1 LTS
Asked by 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&colon;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&colon;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&colon;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&colon;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&colon;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&colon;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&colon;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&colon;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](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

![Screenshot 2023-09-15 023108.png](https://community.atlassian.com/t5/image/serverpage/image-id/280837i3EE939601CA90E71/image-size/large?v=v2&px=999 "Screenshot 2023-09-15 023108.png")

and without

![Screenshot 2023-09-15 023238.png](https://community.atlassian.com/t5/image/serverpage/image-id/280838i9F95E8D91829D616/image-size/large?v=v2&px=999 "Screenshot 2023-09-15 023238.png")

How can I track down a fix for this?


Answers:
author: Mark Keymer
body: 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

comments: author: Andrii Maliuta
body: Hello [@Mark Keymer](/t5/user/viewprofilepage/user-id/3458671) ,

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.


author: Mark Keymer
body: 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.


author: Mark Keymer
body: It would seem that there is no support for the license that I have on that server specifically.


author: Van Tor
body: 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.


Tags: confluence-server

server