lijim / monks-and-mages

Monks and Mages is a TCG-game built on React and socket.io
https://www.monksandmages.com
MIT License
17 stars 0 forks source link

Fix: use SVG over transform to prevent z-Index issues #416

Closed lijim closed 1 year ago

lijim commented 1 year ago

Having an element with transform: rotate(45deg) for the tilted squares representing rarity in the last PR (#415) introduced a visual bug on the deck builder / viewer:

Screen Shot 2023-03-10 at 3 02 29 AM

This is because we rely on successive zIndex's to stack the cards on top of each other, but transform creates a new stacking context for zIndex.

We switched to using an SVG based diamond instead to solve this:

Screen Shot 2023-03-10 at 3 05 24 AM