[BUG] Jira Cloud Inbox–Accept dropdown invisible in Safari due to CSS overflow clipping (workaround)

Question

Description

We have identified a UI rendering issue in Jira Cloud when using the Inbox view in a Jira space with Safari on macOS.

When a work item is forwarded from Jira Customer Service Management to another Jira space, the forwarded item appears correctly in the destination space's Inbox.

However, clicking the Accept button does not visually display the expected dropdown menu containing the Link and Create options.

The issue occurs in Safari, including Private Browsing mode. The same functionality works correctly in Google Chrome.

Steps to Reproduce

* Open Jira Cloud in Safari on macOS.
* Navigate to a Jira space with the Inbox view enabled.
* Forward a work item from Customer Service Management to this space.
* Open the Inbox view.
* Click the Accept button on the forwarded item.

Expected result:

A dropdown menu appears with two options: Link and Create.

Actual result:

Nothing is visually displayed. No JavaScript errors are reported in the browser console.

Technical Investigation

We investigated the issue using Safari Web Inspector and confirmed the following:

* The click event is correctly processed.
* The dropdown menu is successfully created in the DOM.
* The button's aria-expanded attribute changes to true.
* The dropdown menu has valid coordinates within the browser viewport.
* The menu has visibility: visible and opacity: 1.
* The menu elements are accessible through JavaScript.
* Programmatically clicking the hidden Create option successfully opens the work item creation dialog.

Further investigation identified a CSS overflow issue affecting a parent DIV element.

Problematic CSS:

._2O5Vij7dHp {
    overflow: auto;
}

Changing this property to:

._2O5Vij7dHp {
    overflow: visible !important;
}

immediately resolves the issue.

We confirmed that modifying only this specific parent element is sufficient to make the dropdown menu visible.

Workaround

We configured a custom CSS stylesheet in Safari containing:

/* Jira Cloud - Safari Inbox dropdown workaround */

div:has(> table [data-testid="customer-service-inbox.ui.issue-table.action-cell.create-work-item"]) {
    overflow: visible !important;
}

This workaround has been tested and confirmed to work.

However, since the CSS class appears to be dynamically generated, the workaround may stop working after future Jira updates. It may also affect other UI components using the same class.

Request

Please investigate the dropdown rendering issue in Safari and implement a permanent fix.

The dropdown menu should be displayed correctly without requiring custom CSS overrides.

We would also appreciate confirmation of whether this is a known issue affecting Jira Cloud's Inbox functionality in Safari.

David Urbánek · Answer

Hi Martin,

Thanks a lot for your suggestion!

I've updated my custom Safari stylesheet using the :has() selector and the stable data-testid attribute instead of the generated CSS class.

I've tested it, and the Accept dropdown now works perfectly with the updated CSS.

This is definitely a more robust workaround while waiting for an official fix from Atlassian.

Thanks again for your help and for pointing me in the right direction!

Best regards,

David

David Urbánek · Answer

Hi Arek,

Thank you for your feedback and for sharing the related bug reports!

Unfortunately, I'm using the Jira Cloud Free plan, which doesn't provide access to Atlassian Support, so I'm unable to report this issue directly.

I completely agree that the CSS workaround is only a temporary solution, especially since the generated class name may change with future updates.

If you have access to Atlassian Support, would you be willing to report this bug on my behalf? Please feel free to use all the technical details and reproduction steps I've provided.

I'd really appreciate your help in getting this issue reported to Atlassian.

Thanks again!

Best regards,

David

Martin Runge · Answer

Hi David,

You could make the override a bit more resilient while waiting for a fix. The hashed class like ._2O5Vij7dHp is generated at build time and will likely change with the next deployment. Safari supports:has(), so you can target the parent through a stable child, for example:

div:has(> [data-testid="your-stable-child-id"]) {
    overflow: visible !important;
}

I would also scope the fix to Jira only. A global Safari stylesheet applies to every site you open. A userscript or user style extension limited to *.atlassian.net keeps the side effects contained.

Cheers, Martin