apsect-ratio causing issues on old devices
MikhaD opened this issue · comments
The aspect ratio property is causing issues on old devices where it is not supported, see img
It also happens on newer devices with odd aspect ratios.
Or if the page was zoomed out a lot.
What do you mean with odd aspect ratio? This issue is here because of the limited support for the aspect-ratio CSS property which is not supported on older versions of certain browsers.
Could you give an example of what you mean?
problem causes include:
Smaller resolutions
Extreme resolutions e.g. a much higher width then height and vice versa
And it becomes more extreme the lower the total resolution
( Tested on Chrome version 98.0.4758.102)
Could you provide screenshots of the issues?
Hey, sorry for the late response I was unavailable at the time
Images:
https://i.imgur.com/SGcp5YD.png
https://i.imgur.com/hULvvqW.png
https://i.imgur.com/TiJQidN.png
Not really that big of a problem as I don't know many devices that have aspect ratios like what's needed to replicate this bug
Also, I noticed that the answer boxes only scale when vertical changes happen not horizontal which leads to clipping
Potentially fixable with margin-top aspect ratio hack and @supports(aspect-ratio: 1)
Also are you working on a fix for #48
I have the exact same problem because I can't debug it either.
I believe it was caused by an iOS update
And possibility something to do with css grid
That looks fine on my end
Edit: here’s a front end resolution tool that shows the problem using the iPad Pro:
https://screenfly.org/#u=https%3A//mikhad.github.io/wordle/%23daily&w=1366&h=1024&a=22
Enter a word, problem is replicable. Very easy to debug from there. Cheers.
It works perfectly fine for me
consolidated into issue #61