search

freenowtech / wave

Design System of FREE NOW
https://wave.free-now.com
Apache License 2.0
64 stars 22 forks source link

Password component not displayed properly on IOS14 and Mac OSX 12 #290

Closed kasas closed 2 years ago

kasas commented 2 years ago

Relevant code

<Password
                        id="text-field-password"
                        name="password"
                        variant="bottom-lined"
                        ...
                    />

Issue

Password component is not working fine on IOS 14 and Mac OS 12.0.1 with Safari 15.1. The main issue is that the eye icon is located at the start of the component not at the end.

What was expected to happen?

Password component should be displayed properly in all browsers and SO versions.

Reproduction

  1. Use an old device with IOS 14 or Mac OS 12.0.1
  2. Open https://wave.free-now.com/components/password and check bottom-lined variants

Media

IMG_20221024_152342

IMG_20221024_152353

IMG_20221024_155649

arturmiglio commented 2 years ago

Hi @kasas, thanks for opening the issue.

I could reproduce the issue using MacOS 12.1 + Safari 15.2.

Apparently it is a know browser support issue (that could affect other engines and versions too):

Then, apparently the solution would be changing the align-items in the ToggleButton property to use flex-end instead of just end. But this needs to be properly tested.

Stay tuned :)