Shadow DOM on textarea in iOS forces padding

问题:

I am experiencing an issue which puzzles me a bit.

My reference for this issue is Chrome 32 on Mac and Safari on iOS 7.0.4.

In the following example, Chrome renders the text in the .background and textarea elements perfect and on top of each other, this is what I want. Safari on iOS though, offsets the text in the textarea with 3 pixel-units. This happens although padding, border and margin are set to the same values on both elements.

When I am debugging in Safari's developer tools, both through my iPhone device and the iOS simulator, the elements themselves align perfectly when outlining the elements metrics.

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

Demo: http://jsfiddle.net/Y8S5E/2/

Can anyone offer a solution or some theories to research into, for this issue?

Edit

It appears that this is an issue with the textarea's shadow DOM node. Does anyone have some reference to how the padding of this element is defined? Percentage value or hard 3px value? Any way to remove this padding?

回答1:

Unfortunately I don't think you can't style inside of the Shadow DOM in iOS. Some elements expose pseudo attributes which you can hook on to. For instance, <input type="range"> exposes a -webkit-slider-runnable-track pseudo element.

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

You can see this in the dev tools.

But I don't think textarea exposes such a thing.