Jira Service Desk Widget breaks site when disabled
We have installed the Jira Service Desk Widget on our site and all working well. We disabled the widget recently to remove it but unknowingly this disabled any interactivity with the site on mobiles as can be seen in our test page gif below:
This shows two tabs one with a disabled widget and another with enabled widget:
When the widget is disabled an inline style attribute is added with the following values:
- height: 100%
- width: 100%
- position: fixed
- bottom: 0px
- right: 0px
- z-index: 2147483647
As seen below in another gif, when disabled, on mobile, the screen is filled with the disabled Jira Service Desk iframe which sits on top of all content and cannot be clicked through.
This shows enabled/disabled widget on mobile and the disabled iframe filling the screen:
There is no other JavaScript on our test page, and the inline style attribute looks to be added by embed.js which is coming from jsd-widget.atlassian.com so I think it might be a bug with the widget.
I've attached below some static images of a test page containing a disabled and enabled widget:
Enabled widget on mobile: Shows a normal sized container, everything is OK:
Disabled widget on mobile: Shows empty container covering all underlying content, this is the issue 👇:
For comparison here is a disabled widget on desktop, everything is ok:
I found another similar issue here but not around the widget being enabled/disabled so I wonder whether this can be confirmed as an issue with the widget by Atlassian or not.
To recreate:
- Here is the test page https://swiftaid-co-uk-staging-pr-178.onrender.com/test with the disabled widget.
- Open developer tools and toggle device view (Ctrl + Shift + M), refresh page and try to click or input something.
- Or visit the page on a mobile and try to click or input something
- The page is effectively blocked from any interaction