GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.
https://squoosh.app
Apache License 2.0
21.82k stars 1.53k forks source link

implemented scrolling shadows #1361

Closed tsukinoko-kun closed 1 year ago

tsukinoko-kun commented 1 year ago

As @argyleink suggested in issue #218 I tried to implement the scrolling shadows using a gradient background.

Like the one explained here: https://lea.verou.me/2012/04/background-attachment-local

A dark shadow is hardly noticeable so I went for something brighter.

I removed the options-section background to make the scrolling shadows visible. It doesn't look great, since the other components are obviously displayed on top of the scrolling shadows.

Bildschirmfoto 2023-04-08 um 17 05 42

Do you have any ideas on how to fix that? Or is this acceptable?

closes #218

google-cla[bot] commented 1 year ago

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

argyleink commented 1 year ago

i tested out your PR and also tried 2 other techniques for providing a "scroll hint" and none of them felt viable. i'm currently thinking we can close #218, it's obviously not been a huge blocker and there's no clean solutions. the best solution would be if we knew the div was currently overflowing and could apply conditional styles, but that's a style query that's not specced or available yet.