Skip to content

fix(site): clip 3D tilt glare to card radius for Safari - #3

Open
niklonskyi wants to merge 1 commit into
Jakubantalik:mainfrom
niklonskyi:main
Open

fix(site): clip 3D tilt glare to card radius for Safari#3
niklonskyi wants to merge 1 commit into
Jakubantalik:mainfrom
niklonskyi:main

Conversation

@niklonskyi

Copy link
Copy Markdown

Summary

  • Safari doesn't apply a card's overflow: hidden + border-radius clip to
    a composited child (mix-blend-mode: screen) when the card also has
    transform-style: preserve-3d. On the 3D Tilt card (P19), this let the
    cursor-tracked glare and static sheen paint past the rounded corners on
    hover, showing a flash of square 90° edges (right upper corner on the screenshot).
  • Fix by giving .p19-glare and .p19-card::before their own
    border-radius: inherit, so they clip to the card's rounded corners.
  • Applied to the live showcase and prototypes playground CSS, the
    copyable .t-tilt-glare template, and the skill payload
Screenshot 2026-07-08 at 16 25 16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant