Shadow DOM on textarea in iOS force padding app

Question

Shadow DOM on textarea in iOS force padding app

I am having a problem that puzzles me a bit.

My link for this problem is Chrome 32 on Mac and Safari on iOS 7.0.4.

In the following example, Chrome displays text in elements .backgroundboth textareaperfectly and one above the other, this is what I want. Safari on iOS, though, offsets text in textareawith 3 pixel units. This happens although overlays, borders, and fields are set to the same values for both elements.

When I debug Safari developer tools, both through my iPhone device and in the iOS simulator, the elements themselves are perfectly aligned when defining element metrics.

Metrics outline on iOS

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