iOS中textarea上的Shadow DOM强制填充

Question

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

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

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

当我在Safari的开发人员工具中调试时,无论是通过我的iPhone设备还是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/

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

编辑

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

Answer 1

不幸的是,我不认为你不能在iOS中的Shadow DOM内部设置样式.有些元素会暴露您可以挂钩的伪属性.例如,<input type="range">公开一个-webkit-slider-runnable-track伪元素.

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

您可以在开发工具中看到这一点.

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