From 4f39f68169f1ba14ba6c7baad2f4b5587cf0e3e7 Mon Sep 17 00:00:00 2001 From: Martin Rapp <59310516+madaxen86@users.noreply.github.com> Date: Tue, 15 Jul 2025 11:35:19 +0200 Subject: [PATCH 1/2] Update animated-progress.tsx Fixes Safari not applying border top radius if left and right are set. Making parent node in Circle form and hiding overflow fixes this --- packages/spectacle/src/components/animated-progress.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/spectacle/src/components/animated-progress.tsx b/packages/spectacle/src/components/animated-progress.tsx index 3a25434fb..d7555f03a 100644 --- a/packages/spectacle/src/components/animated-progress.tsx +++ b/packages/spectacle/src/components/animated-progress.tsx @@ -27,6 +27,8 @@ export const PacmanBase = styled.div` width: ${({ pacmanSize }) => pacmanSize}px; transition: left 0.3s ease-in-out 0.2s; transform: translate(-50%, -50%); + border-radius: 9999px; + overflow: hidden; `; const pacmanTopFrames = keyframes` From 5aae8328c23ac2f6649d3be37513ba972ad72869 Mon Sep 17 00:00:00 2001 From: Scott Rippey Date: Tue, 15 Jul 2025 12:14:45 -0600 Subject: [PATCH 2/2] changeset --- .changeset/bright-crews-bathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bright-crews-bathe.md diff --git a/.changeset/bright-crews-bathe.md b/.changeset/bright-crews-bathe.md new file mode 100644 index 000000000..da2a35dd0 --- /dev/null +++ b/.changeset/bright-crews-bathe.md @@ -0,0 +1,5 @@ +--- +"spectacle": patch +--- + +Ensure "PacMan" animation works in Safari