very cool component @lailalalami.com

This was done mainly on HTML and CSS only. With Javascript being used only for toggling a class name.

Original Instagram post: www.instagram.com/p/DLyt8qPCIxX/

Take a look here and let me know your thoughts!

billantony.com

Tech stack:
* Plain HTML 🟠
* Plain CSS 🔵
* Jekyll -> Static site generation 🔴
* No Javascript 🙅

I like this simple approach and hope to take this initial website design a lot further down the road

Great day! ✌️

SDG.

such a creative use case for it @amitsheen.bsky.social !!
Thanks for sharing ✨

This is screenshot is from the beautiful (and well designed) website by #Locomotive agency sundaecreative.com/en

In this case, I knew this container was the one because it had a `overflow-x: hidden`

There you go! Fixed

One of my main goals is to help #Shopify merchants with their existing stores so they don't have this kind of bugs

So if you are one, feel free to reach out 👋

SDG

The fix is very easy! just add

`overflow-y: hidden` to the overflowing container

How do you know which one is the "overflowing container"?

Well, you can inspect and see the one that has a width bigger than the page width or the one that has a `overflow` property set

👇👇👇

oh, thanks @gsap-greensock.bsky.social ! I'll try that out :)

thanks @una.im and all the hard working chrome team!!!

Although transforming properties other than `transform` and `opacity` is not so great for performance really because by changing any other property will trigger repainting 🙃

But, this is the only choice for now 🎉

How to solve:

Simply do

`overflow: visible`

on THAT parent element ✅

It was a strange situation because the outlines were actually set in the element

```
a:focus-visible {
outline: 2px solid Highlight;
}
```

Still, the outlines didn't show up when focusing by keyboard

After inspecting and googling, I discovered the issue

Parent element with `overflow: hidden`

Link to the Webflow site: tinyurl.com/3cc2xsbf

This is a rebuild from the Market Vision Website marketvision.ca