iOS中的textarea上的Shadow DOM强制填充

我遇到一个使我困惑的问题。

我对这个问题的参考是Mac上的Chrome 32和iOS 7.0.4上的Safari。

在以下示例中,Chrome将.backgroundtextarea元素中的文本呈现完美并相互.background ,这就是我想要的。 iOS上的Safari,用3个像素单位来抵消textarea中的textarea 。 虽然填充,边框和边距在这两个元素上都设置为相同的值,但发生这种情况。

当我在Safari的开发者工具中进行debugging时,无论是通过我的iPhone设备还是iOS模拟器,在概述元素指标时,元素本身都是完美alignment的。

iOS上的度量大纲

标记

 <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/

任何人都可以提供一个解决scheme或一些理论来研究,为这个问题?

编辑

看来,这是textarea的阴影DOM节点的问题。 有没有人有一些参考如何定义这个元素的填充? 百分比值或硬3px值? 任何方式来删除这个填充?

Shadow DOM节点强制在textarea中填充

不幸的是,我不认为你不能在iOS中的阴影DOM的风格。 一些元素暴露你可以挂钩的伪属性。 例如, <input type="range">公开了一个-webkit-slider-runnable-track伪元素。

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

你可以在开发工具中看到这个。

在这里输入图像说明

但我不认为textarea暴露这样的事情。