<Dialog> breaks styles when height becomes more than the screen in safari 18.3 #2511
Description
Describe the bug
As soon as the contents inside make it stretch to more than the screen, the big chunk of CSS styles just disappears.
Only breaks in Safari 18.3. Safari 18.6 is working as intended. I didn’t test any other versions.
Tested for UIkit versions: 7.20.0, 7.26.0.
Click to expand code
import { useState } from "react";
import {
Dialog,
Button,
ThemeProvider,
SegmentedRadioGroup,
SelectOption,
} from "@gravity-ui/uikit";
import "./styles.css";
import "@gravity-ui/uikit/styles/styles.scss";
export const boolSelectOptions: SelectOption<undefined>[] = [
{
value: "true",
content: "true",
},
{
value: "false",
content: "false",
},
];
export default function App() {
const [isDialogOpen, setIsDialogOpen] = useState(true);
const [boxes, setBoxes] = useState<number[]>([]);
return (
<ThemeProvider>
<Dialog
onClose={() => {
setIsDialogOpen(false);
}}
open={isDialogOpen}
size="l"
disableOutsideClick
>
<Dialog.Header caption={"Edit anomaly detector"} />
<Dialog.Body>
{boxes.map((box) => {
return (
<div
key={box}
style={{
height: 100,
width: 400,
marginBottom: 20,
}}
>
<SegmentedRadioGroup size="m" options={boolSelectOptions} />
</div>
);
})}
<Button onClick={() => setBoxes([...boxes, boxes.length])}>
Add box
</Button>
</Dialog.Body>
<Dialog.Footer
onClickButtonCancel={() => {
setIsDialogOpen(false);
}}
onClickButtonApply={() => {
setIsDialogOpen(false);
}}
textButtonApply={"Save"}
textButtonCancel="Cancel"
/>
</Dialog>
</ThemeProvider>
);
}Screen.Recording.2025-11-19.at.16.23.00.mp4
Reproduction
https://codesandbox.io/p/sandbox/kind-resonance-fshd2w
Steps to reproduce
No response
Environment
MacOS, Safari 18.3
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.