Shadow DOM en textarea en iOS fuerza el relleno

Estoy experimentando un problema que me desconcierta un poco.

Mi referencia para este problema es Chrome 32 en Mac y Safari en iOS 7.0.4.

En el siguiente ejemplo, Chrome representa el texto en los elementos .background y textarea perfectos y uno encima del otro, esto es lo que quiero. Safari en iOS, sin embargo, compensa el texto en el área de textarea con 3 unidades de píxeles. Esto sucede aunque el relleno, el borde y el margen están configurados con los mismos valores en ambos elementos.

Cuando estoy depurando las herramientas de desarrollador de Safari, tanto a través de mi dispositivo iPhone como del simulador iOS, los elementos se alinean perfectamente al delinear las métricas de los elementos.

Métricas delinear en iOS

Margen

 
This is a test

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; } 

Demostración: http://jsfiddle.net/Y8S5E/2/

¿Puede alguien ofrecer una solución o algunas teorías para investigar sobre este tema?

Editar

Parece que esto es un problema con el nodo DOM sombreado de textarea . ¿Alguien tiene alguna referencia sobre cómo se define el relleno de este elemento? ¿Valor porcentual o valor de 3px duro? Cualquier forma de eliminar este relleno?

El nodo DOM de las sombras fuerza el relleno en textarea

Lamentablemente, no creo que puedas estilizar dentro de Shadow DOM en iOS. Algunos elementos exponen pseudo atributos a los que puede conectar. Por ejemplo, expone un -webkit-slider-runnable-track .

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

Puedes ver esto en las herramientas de desarrollo.

enter image description here

Pero no creo que textarea expone tal cosa.