ios dom解析html,html – iOS中textarea上的Shadow DOM强制填充

我遇到了一个令我困惑的问题.

我对此问题的参考是Mac上的Chrome 32和iOS 7.0.4上的Safari.

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

当我在Safari的开发人员工具中调试时,无论是通过我的iPhone设备还是iOS模拟器,在概述元素指标时,元素本身都能完美对齐.

标记

This is a test

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;

}

对于这个问题,任何人都可以提供解决方案或一些理论来研究吗？

编辑

看来这是textarea的shadow DOM节点的一个问题.有没有人提到如何定义这个元素的填充？百分比值或硬3px值？有没有办法删除这个填充？