Проблема с теневым текстовым полем в Chrome CSS3 Box

Question

Кто-нибудь сталкивался с проблемой в Google Chrome при применении тени для ввода текста? У меня есть эта неясная проблема, когда время от времени при вводе ввода тень от окна появляется в два раза. Я пробовал несколько вещей, но, похоже, ничего не исправить. Хуже всего то, что проблема очень противоречива. Единственное, что я могу сделать для того, чтобы эта проблема возникла частично, - это каждый раз сбрасывать кэш браузера.

CSS, применяемый для ввода, выглядит следующим образом:

input[type=text] {
  padding: 7px 0 7px 10px;
  height: 14px;
  border: 1px solid #dadada;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: #e4e4e4 4px 5px 10px inset;
  -webkit-box-shadow: #e4e4e4 4px 5px 10px inset;
  -o-box-shadow: #e4e4e4 4px 5px 10px inset;
  box-shadow: #e4e4e4 4px 5px 10px inset;
}

input[type=text]:focus {
  outline: none;   
}

Вот JSFiddle кода в действии. http://jsfiddle.net/S5xzM/

Любое понимание будет с благодарностью!

[Редактировать] Версия Chrome, в которой это происходит в настоящее время, - 14.0.835

Answer 1

Интересная проблема!

Это определенно ошибка Webkit. Это происходит только в том случае, если вы положили outline: none; на псевдоселектор фокуса.

Это единственный обходной путь, который я смог найти:

input[type=text]:focus {
    outline-color: rgba(255,255,255,0);
    outline-offset: 10px;
}

Я пробовал различные методы, такие как outline-width: 0 или outline-color: transparent, но они не работали.

http://jsfiddle.net/Gvh2L/