The problem with the selection of text in the form field in Safari and Сhrome

Perhaps, one of you, dear readers, has ever encountered the following problem: if when selecting text in a form field in Safari and Chrome browsers, the mouse goes outside the field, then the selection mysteriously disappears. Those to whom the description of this bug seemed too confusing, can look at an example .

Through long-term experiments, it was found out in which situations the form fields behave in such a strange way, although the other question “why” remained unanswered.

So, here it is, a revelation: this oddity arises if any parent of the field of this form, including even the body tag, is worth ... what would you think? text-align: center!

Accordingly, the solution to the problem is to wrap the input with another container that will have text-align: left exposed.
')

However, this is not all

If among the parents of a field there is at least one element with display: inline-block, then this solution immediately, and no less mysteriously, stops working.

Some brief examples

The selection will disappear

Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >

1. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >
2. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >
3. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >

In this case, the selection will not disappear.

Copy Source | Copy HTML

1. < div style = "text-align: center">
2. < div style = "text-align: left">
3. < input type = "text" />
4. </ div >
5. </ div >

In this case, the selection will still disappear.

Copy Source | Copy HTML

1. < div style = "text-align: center">
2. < div style = "display: inline-block">
3. < div style = "text-align: left">
4. < input type = "text" />
5. </ div >
6. </ div >
7. </ div >

Thank you for your attention. I hope someone this information will be useful.