search

GoogleChromeLabs / squoosh

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

CSS Safe area insets #1372

Open kevinsimper opened 1 year ago

kevinsimper commented 1 year ago

A lot of alerts in Sqoosh are showed at the bottom of the screen and the app does not take into account safe areas.

It can be implemented with CSS to push up elements to not touch the bottom of the screen :) https://developer.mozilla.org/en-US/docs/Web/CSS/env

Really nice with Sqoosh be a prime example of a PWA, so only want to help 👏

jakearchibald commented 1 year ago

Can you give an example of a device where this is causing an issue? I thought env was only useful in certain full screen situations.

kevinsimper commented 1 year ago

Here is the PWA added to Home Screen, so no Safari Chrome. 16887534705591232492200957242787 Here is a iPhone 14 Pro and some interactions are ignored because it thinks you are touching the app switcher.