The width of the vertical strip of the width of the sub-cursor is constantly displayed in the Safari / textarea tab

Question

In Safari 9.0.3, Mac OS X El Capitan, on one of my pages, all input and textarea elements show this focusing behavior: a vertical bar that is constantly visible to the left of the element, with a width that is thinner than the input cursor.

When the element is focused, the cursor blinks, i.e. It turns on and off. So I took 2 screenshots for both:

When the cursor is on :

When the cursor is off :

As you can see in the second image, where the cursor is off, there is still a vertical panel that never disappears when the element is focused.

I tried to track which CSS rules caused the problem by switching the rules one by one in the browser. It turned out that it was the font size. But the fact is that this problem occurs only when the font size is set to a certain value (14 pixels in my case). Setting the font size to other values ​​causes the panel to leave.

This does not happen in any other major browsers.

Has anyone else seen this? Is this a Safari bug?

Answer 1

I had a similar problem in Safari 10.1.2. When I clicked the input field, and then clicked somewhere else, so that the field is empty and out of focus, the panel remained. Your decision to set the font size did not help, but in my case the rule text-align: center; applied to an input element. Everything works fine after I switched it to text-align: left; .