iOS中的textarea上的Shadow DOM强制填充 [英] Shadow DOM on textarea in iOS forces padding

问题描述

我对这个问题的参考是Mac上的Chrome 32和iOS 7.0.4上的Safari。

>

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

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

标记

 < div class =container> 
< div class =background>这是一项测试< / div> 
< textarea>这是一个测试< / textarea> 
< / div> 
  

CSS

  .container {
 border：1px solid #cdcdcd; 
背景：＃f0f0f0; 
 width：400px; 
 height：50px; 
职位：亲属; 
 margin：24px 0; 
} 
 
 .background {
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
剩下：0; 
颜色：＃f00; 
} 
 
 textarea {
 width：100％; 
身高：100％; 
 box-sizing：border-box; 
背景：透明; 
 border：0; 
职位：亲属; 
 z-index：2; 
} 
  

演示：

你可以在开发工具中看到这个。

< img src =https://i.stack.imgur.com/toCfr.pngalt =在这里输入图片描述>

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

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?

解决方案

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.

这篇关于iOS中的textarea上的Shadow DOM强制填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！