Shadow DOM on textarea in iOS forces padding
css, html, ios, mobile-safari, shadow-dom
Solution
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.
Problem
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?