Тень DOM на textarea в силах ввода iOS

Question

У меня возникает проблема, которая меня немного озадачивает.

Моей ссылкой для этой проблемы является Chrome 32 на Mac и Safari на iOS 7.0.4.

В следующем примере Chrome отображает текст в элементах .background и textarea, а также на вершине друг друга, это то, что я хочу. Safari на iOS, хотя, смещает текст в textarea с 3 пиксельными единицами. Это происходит, хотя наложения, границы и поля устанавливаются одинаковыми значениями для обоих элементов.

Когда я отлаживаю инструменты разработчика Safari, как через мое устройство iPhone, так и с помощью iOS-симулятора, сами элементы идеально выравниваются при описании метрик элементов.

Markup

<div class="container"> 
    <div class="background">This is a test</div> 
    <textarea>This is a test</textarea> 
</div> 

CSS

.container { 
    border: 1px solid #cdcdcd; 
    background: #f0f0f0; 
    width: 400px; 
    height: 50px; 
    position: relative; 
    margin: 24px 0; 
} 

.background { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    color: #f00; 
} 

textarea { 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
    background: transparent; 
    border: 0; 
    position: relative; 
    z-index: 2; 
} 

Демо: http://jsfiddle.net/Y8S5E/2/

Может ли Я предлагаю решение или некоторые теории для исследования в этой проблеме?

Редактировать

Оказывается, что это проблема с тенью DOM узле textarea «s. Кто-нибудь имеет ссылку на то, как определяется заполнение этого элемента? Процентное значение или твердое значение 3px? Любой способ удалить это дополнение?

Answer 1

К сожалению, я не думаю, что вы не можете стиль внутри Shadow DOM в прошивке. Некоторые элементы отображают псевдо атрибуты, к которым вы можете подключиться. Например, <input type="range"> предоставляет псевдо-элемент -webkit-slider-runnable-track.

http://codepen.io/robdodson/pen/FwlGz

Вы можете увидеть это в Дев инструментов.

Но я не думаю, что textarea выставляет такую ​​вещь.