5

In Safari 9.0.3, Mac OS X El Capitan, on one of my pages, all the input and textarea elements exhibit this behaviour when focused: there is a vertical bar constantly visible on the left of the element, with a width thinner than the input cursor.

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

When the cursor is on: enter image description here

When cursor is off: enter image description here

As you can see in the 2nd image where the cursor is off, there is still a vertical bar there, which never disappears when the element is focused.

I tried to track down which CSS rule(s) caused the issue, by toggling rules one by one in the browser. It turned out that font-size was it. But the thing is: this issue happens only when the font size is set to a particular value (14px in my case). Setting font size to other values causes the bar to go away.

This doesn't happen in any other major browsers.

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

Frits
  • 7,341
  • 10
  • 42
  • 60
lgc_ustc
  • 1,524
  • 2
  • 20
  • 31

1 Answers1

0

I had a similar issue in Safari 10.1.2. When I clicked the input field, and then clicked somewhere else so the field is empty and out of focus, the bar remained. Your solution to set the font-size did not work, but in my case text-align: center;rule applied to the input element was the reason. Everything works fine after I've switched it to text-align: left;.

jean_1314
  • 1
  • 1