Skip to main content
Dec 16, 2018 5:57 PM UTC
Answered

Inputs change their order positions in safari

Hi All

I have spend all day trying to figure out why my text inputs changing their order position based on which one is being typed with no luck. Here is a video for this issue

https://1drv.ms/v/s!AuWdnCjLsV5DjNBaxEBhNmzNUUNDrg

It only happens in Safari. I haven't noticed this behaviour in any other explorer. The web page is written in React and has only 2 simple inputs for email and password wrapped in form element. I don't know if this is a common issue in safari or not and how to fix it. If not I will post a code here or whatever you will ask for.

Thanks in advance

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Correct answer
    Dec 19, 2018 6:19 PM UTC

    OK. Thanks for your feedback. It looks like you have found the culprit. Like Nancy, I do not use React, instead I use a more recent framework called AppConnect. Good luck.


    BTW I have fixed the problem for now... Basically I found that Safari (only) mess up with array position ordering everytime something is updated in it. What I did was put re-sorting the array which holds all config for inputs and it works. I still think this is a safari bug becasue no other browser doing that

    18 replies

    Nancy OShea
    Community Expert
    Community Expert
    Dec 16, 2018 7:27 PM UTC

    What's the URL to your problem page online?

    Translate
    Nancy O'Shea— Product User & Community Expert
    Dec 16, 2018 7:31 PM UTC

    Hi Nancy

    You can see that in perfobase.com

    Translate
    Nancy OShea
    Community Expert
    Community Expert
    Dec 16, 2018 8:08 PM UTC

    Personally, I don't like what's happening to input placeholder text on focus in any browser.  It's just weird.

    Also the minified CSS is difficult to wade through.  Do a Ctrl+F (Find) for input-placeholder.  Start removing CSS rules that cause placeholder text to move. Maybe you can find the culprit that's causing Safari to go spastic.

    Translate
    Nancy O'Shea— Product User & Community Expert