PSA: Safari 14.0.3 can break @atlaskit/modal-dialog styles

[acampbell3]

TLDR: All versions of@atlaskit/modal-dialog have the potential to render incorrectly on the latest patch version of Safari (14.0.3). The post below lists details about the issue and how to replicate, as well as methods of mitigating the issue.

What’s the issue?

On February 2, Apple released a security patch for Safari to users, bumping the version from 14.0.2 to 14.0.3. This patch included an undocumented change to how styles were calculated in certain circumstances, causing @atlaskit/modal-dialog to render incorrectly. The specific change to Safari’s behaviour is in the process of being isolated and the behaviour has been reported to the Safari team.

What does the issue look like?

The issue can causes overflowing content in a modal to flow off the edge of the dialog rather than being contained inside a scroll container.

The image below demonstrates this behaviour in Safari 14.0.3:

Does this affect me?

This issue is caused by the new version of Safari, and is not the result of any recent style changes in the modal-dialog component. Investigation has shown it affects all versions of @atlaskit/modal-dialog.

If you have any views using @atlaskit/modal-dialog and have content that can overflow on supported screen sizes, you should open the view in Safari 14.0.3 and verify whether the issue occurs. Some customised modals in product do not appear to be affected by this issue.

Although the combination of styles that triggers this issue seems unique to modal-dialog, be aware that styles elsewhere may also be affected by this Safari update. A minimal reproduction of this issue has been created: Safari-14.0.3-overflow-issue - CodeSandbox.

How can I fix this issue in my product?

Fix 1: Roll-forward to the latest version

If your application is on a recent version of @atlaskit/modal-dialog, the easiest approach is to roll forward to the latest version of the component (11.2.6)

Upgrade: yarn upgrade @atlakit/modal-dialog@^11.2.6

Fix 2: Set custom container (supported @atlaskit/modal-dialog >= 7.2.0)

If upgrading is not an option, the styles that mitigate the issue can be set directly. The easiest way to do this is to set a custom container using the components prop, which is supported since @atlaskit/modal-dialog@7.2.0. As class names are non-deterministic for this component, this is preferable to reaching into the component with CSS selectors.

The below example and sandbox demonstrate the fix.

Demo: HOT-94230-modal-dialog-fix-custom-container - CodeSandbox

export default function App() {
  const CustomContainer = (props: any) => {
    // Applying this minHeight fixes the issue
    return <div style={{ minHeight: 0 }} {...props} />;
  };

  return (
    <ModalDialog
      components={{
        Container: CustomContainer
      }}
    >
      <Lorem />
    </ModalDialog>
  );
}

Fix 3: Apply version specific consumer-side patch via patch-package

If you are depending on multiple versions of the modal package, are very far behind, or don’t have the luxury to roll-forward, you should instead consider applying a patch to your node_modules via patch-package.

The files to modify are:

node_modules/@atlaskit/modal-dialog@11.2.5/dist/cjs/styled/Content.js line:115
node_modules/@atlaskit/modal-dialog@11.2.5/dist/esm/styled/Content.js line:94
node_modules/@atlaskit/modal-dialog@11.2.5/dist/es2019/styled/Content.js line:21

Add min-height: 0; to the style string at these locations

Note: you have to apply this patch to all versions of modal you depend on and indirectly depend on.

Create the patch:

npx patch-package @atlaskit/modal-dialog