html - 删除textarea中的文本会使元素消失

Question

我在我正在处理的网站上发现了一个非常奇怪的错误，如果我从中删除所有文本，textarea 就会消失 - 但前提是该文本足够长以创建一个滚动条。删除少量文本没问题。它似乎也只发生在 Mac 上的 Chrome 中(尽管我还没有对浏览器进行广泛的测试)。

我在这个 codepen 中重新创建了错误*.

通过粘贴当前应用于我的 textarea 的所有 CSS 属性，该错误已被重新创建。现在我的问题是有超过 260 个 CSS 属性需要检查以找出导致它的原因。

我能做些什么来比检查所有应用的 CSS 属性更快地调试它吗？

*为了后代的利益，这里是应用于 textarea 的属性列表:

textarea{
  -webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: none;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: ease;
-webkit-app-region: no-drag;
-webkit-appearance: none;
-webkit-backface-visibility: visible;
-webkit-background-clip: border-box;
-webkit-background-composite: source-over;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-border-fit: border;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-image: none;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-box-shadow: none;
-webkit-clip-path: none;
-webkit-column-break-after: auto;
-webkit-column-break-before: auto;
-webkit-column-break-inside: auto;
-webkit-column-count: auto;
-webkit-column-gap: normal;
-webkit-column-rule-color: hsl(0, 0%, 0%);
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0px;
-webkit-column-span: none;
-webkit-column-width: auto;
-webkit-filter: none;
-webkit-font-smoothing: auto;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-line-box-contain: block inline replaced;
-webkit-line-break: auto;
-webkit-line-clamp: none;
-webkit-locale: auto;
-webkit-margin-after-collapse: collapse;
-webkit-margin-before-collapse: collapse;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position: 0% 0%;
-webkit-mask-repeat: repeat;
-webkit-mask-size: auto;
-webkit-perspective: none;
-webkit-perspective-origin: 131.671875px 45px;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: hsl(0, 0%, 0%);
-webkit-text-emphasis-position: over;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(0, 0, 0);
-webkit-text-orientation: vertical-right;
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(0, 0, 0);
-webkit-text-stroke-width: 0px;
-webkit-transform: none;
-webkit-transform-origin: 131.671875px 45px;
-webkit-transform-style: flat;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
align-content: stretch;
align-items: start;
align-self: start;
alignment-baseline: auto;
backface-visibility: visible;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: hsl(0, 100%, 100%);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
baseline-shift: baseline;
border-bottom-color: hsl(120, 100%, 25%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: hsl(120, 100%, 25%);
border-left-style: solid;
border-left-width: 2px;
border-right-color: hsl(120, 100%, 25%);
border-right-style: solid;
border-right-width: 2px;
border-top-color: hsl(120, 100%, 25%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 2px;
bottom: auto;
box-shadow: none;
box-sizing: border-box;
buffered-rendering: auto;
caption-side: top;
clear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: hsl(0, 0%, 0%);
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
color-rendering: auto;
cursor: auto;
direction: ltr;
display: block;
dominant-baseline: auto;
empty-cells: show;
fill: hsl(0, 0%, 0%);
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flex-basis: auto;
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: left;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
font-family: avenir, '“Helvetica Neue”', Arial, sans-serif;
font-kerning: auto;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-variant-ligatures: normal;
font-weight: normal;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
height: 90px;
image-rendering: auto;
justify-content: flex-start;
left: auto;
letter-spacing: normal;
lighting-color: rgb(255, 255, 255);
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 5px;
margin-left: 5.359375px;
margin-right: 0px;
margin-top: 0px;
marker-end: none;
marker-mid: none;
marker-start: none;
mask: none;
mask-type: luminance;
max-height: none;
max-width: none;
min-height: 90px;
min-width: 0px;
object-fit: fill;
object-position: 50% 50%;
opacity: 1;
order: 0;
orphans: auto;
outline-color: hsl(0, 0%, 0%);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-wrap: break-word;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
paint-order: fill stroke markers;
perspective: none;
perspective-origin: 131.671875px 45px;
pointer-events: auto;
position: static;
resize: both;
right: auto;
shape-image-threshold: 0;
shape-margin: 0px;
shape-outside: none;
shape-rendering: auto;
speak: normal;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1;
tab-size: 8;
table-layout: auto;
text-align: start;
text-anchor: start;
text-decoration: none;
text-indent: 0px;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-transform: none;
top: auto;
touch-action: auto;
transform: none;
transform-origin: 131.671875px 45px;
transform-style: flat;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vector-effect: none;
vertical-align: top;
visibility: visible;
white-space: pre-wrap;
widows: auto;
width: 263.359375px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;
z-index: auto;
zoom: 1;
}

更新:省略了继承值的 CSS(但是，仅这些属性似乎无法重现错误)。

-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-attachment: scroll;
background-clip: border-box;
background-color: hsl(0, 100%, 100%);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: hsl(120, 100%, 25%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: hsl(120, 100%, 25%);
border-left-style: solid;
border-left-width: 2px;
border-right-color: hsl(120, 100%, 25%);
border-right-style: solid;
border-right-width: 2px;
border-top-color: hsl(120, 100%, 25%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 2px;
box-sizing: border-box;
color: hsl(0, 0%, 0%);
cursor: auto;
display: block;
flex-direction: column;
float: left;
font-family: avenir, '“Helvetica Neue”', Arial, sans-serif;
font-size: 18px;
font-weight: normal;
height: 90px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 5px;
margin-left: 5.359375px;
margin-right: 0px;
margin-top: 0px;
min-height: 90px;
outline-color: hsl(0, 0%, 0%);
outline-style: none;
outline-width: 0px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: pre-wrap;
width: 263.359375px;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;

Answer 1

我已将问题确定为 chrome 中的错误。

出于某种原因，如果 textarea 元素包含足够的文本，它需要一个内部滚动条，同时具有“ float ”属性。当 textarea 文本中的文本不再足够长而需要滚动条时，就会产生这个问题。

作为一个简单的解决方案，从 textarea 中删除 float 属性。

我已经在 codepen 中复制了这个问题:http://codepen.io/viralpickaxe/pen/VYPzgJ

我已经在 chromium 元素问题页面上提交了一个问题:https://code.google.com/p/chromium/issues/detail?id=447421

注意: 我测试过这是多个浏览器，似乎只发生在 chrome 中。