Проблема с выделением текста в поле формы у Safari и Сhrome

Возможно, кто-то из вас, дорогие читатели, когда-нибудь сталкивался со следующей проблемой: если при выделении текста в поле формы в браузерах Safari и Chrome мышка выходит за пределы поля, то выделение загадочным образом пропадает. Те, кому описание этого бага показалось слишком запутанным, могут посмотреть пример.

Путем долгих экспериментов было выяснено, в каких именно ситуациях поля формы ведут себя таким странным образом, хотя другой вопрос «почему» так и остался без ответа.

Итак, вот оно, откровение: данная странность возникает в том случае, если у любого родителя поля этой формы, включая даже тег body, стоит… что бы вы думали? text-align: center!

Соответственно, решение проблемы состоит в том, чтобы обернуть input ещё одним контейнером, у которого будет выставлен text-align: left.

Однако это ещё не всё

Если среди родителей поля есть хотя бы один элемент с display: inline-block, то данное решение тут же, и не менее загадочным образом, перестает работать.

Несколько резюмирующих примеров

Выделение будет пропадать

Copy Source | Copy HTML

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

В этом случае выделение пропадать не будет

Copy Source | Copy HTML

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

В этом случае выделение всё равно будет пропадать

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>

Cпасибо за внимание. Надеюсь, кому-то эти сведения окажутся полезными.