pookage / portfolio

Personal portfolio site for pookage.dev
3 stars 0 forks source link

Framework rollovers appear behind content #17

Open pixelypants opened 4 years ago

pixelypants commented 4 years ago

Love the site and thought I'd make the effort to look about the site and find some small bug to report... seeing you laid down the challenge on page one :)

When rolling over the framework icons in the "About" section, the animated labels go under the content background.

image Google Chrome - Version 78.0.3904.108 (Official Build) (64-bit)

image Firefox - 71.0 (64-bit) - has some alignment issues also

image Both browsers have the UnderConstruction__wrapper blocking the rollover when first navigating to "About"

Love ya work!

pookage commented 4 years ago

Aha, good spots!

When rolling over the framework icons in the "About" section, the animated labels go under the content background.

Ah, nice - I'm able to replicate this one by snapping the site to the top-left corner of the screen. I'm already using a css variable to control the width of the elements here, so I'll just tie the font-size of these labels to that as well.

Firefox - 71.0 (64-bit) - has some alignment issues also

Ahh, I recognise this bug but thought I'd already accounted for it! Alas - it's caused by my use of a negative margin to hide scrollbars on Windows - which isn't needed on Mac OS as their scrollbars aren't part of the element flow. I just need to do a better job at detecting browser / os combo here.

Both browsers have the UnderConstruction__wrapper blocking the rollover when first navigating to "About"

Ahh, again - was able to replicate by snapping to the TL corner. Just need to add a pointer-events: none; in here. d'oh.

Thanks for the spots - will tuck into these and some more improvements come next week 🙌