This is an interesting behavior in Mozilla. This need to be share to relative Mozilla community. For temporary solution you can override inline “margin” property by using !important property in CSS. Try below code :
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
margin:0 !important;
}<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>;
}
I have the following sample code:
div {
display: inline-block;
padding: 5px;
background: #f00;
}
textarea {
display: block;
}<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
<p>hellohellohellohellohellohellohellohello</p>
<textarea></textarea>
</div>It shows a red region (<div>) containing the paragraph “hellohellohello…” (<p>) and a resizable textarea (<textarea>).
Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties width and height are added to the textarea element. When necessary, the containing <div> will be resized to neatly contain both the paragraph and the textarea.
Behavior in Chrome (version 80): When resizing the textarea, an additional inline CSS property margin is added to the textarea as well, causing the containing <div> to be resized together with the textarea, keeping the initial margins fixed.
Does anybody know why these behaviors are different between Chrome and Firefox?
In my current application, I prefer the Firefox behavior. How can I make Chrome to use the same behavior as Firefox? (Preferably without using JavaScript…)
Edit:
I noticed that the behavior is correct when I remove the display: block; CSS declaration from the textarea element.
So the actual questions here are:
display: block; in its CSS styling, anddisplay: block; in the CSS styling.this is for sure a bug. Here is an intresting case: first reduce the width of textarea and you will notice the margin growing then make it big again and that margin will stay fixed
Yes. I think this solution is fine, at least for now. So I should either remove declaration
I only think that it’s not Mozilla Firefox who is behaving weird here, but Google Chrome…