Board Layout Issues on new iOS devices & very old devices

[MikhaD]

Describe the bug This bug report consolidates issues #8 , #48 , #49 , and #55 .

Lack of aspect-ratio support on Old Devices

To Reproduce Steps to reproduce the behavior:

1. Open application on an older device
2. Observe that the board is condensed in the center

Expected behavior Behave as normal with full size board

Screenshots

Version info https://caniuse.com/mdn-css_properties_aspect-ratio

Layout issues on newer iOS devices

To Reproduce Steps to reproduce the behavior:

1. HELP NEEDED: What are the steps to reproduce this behavior NEEDS VERIFICATION

• Only happens in daily section
• only after adding any letter. On backspace grid doesn't change

Expected behavior Behave as normal with full size board

Screenshots

Smartphone

• Device: Apple device running iOS
• OS: iOS 15.6.1
• Browser: Safari, HELP NEEDED: Does this affect other browsers on iOS devices with this version?
• Browser Version: N/A

Additional Info @JasonLovesDoggo claims the issue can be replicated here: https://screenfly.org/#u=https%3A//mikhad.github.io/wordle/%23daily&w=1366&h=1024&a=22

[MikhaD]

Any help verifying the steps to reproduce, identifying affected browsers, or possible causes would be appreciated.

[MikhaD]

There is an issue with the animation and the constraints. Here’s a dirty fix for it:

* Replicated: macOS mbp Big Sur -> Ventura 13, 14, 15" iOS iPad models

Remove following lines (4 & 5) from global.css

box-sizing: border-box;
transition: background-color 0.2s ease;

Do you have any more information about the issue or know where I could read up on it? That css is relatively important and I'd like to understand exactly what is going on before I start working around it.

[lukeswitz]

This doesn't seem to work on your version, I had an early fork I kept local. Disregard