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 :
I have the following sample code:
It shows a red region (
<div>) containing the paragraph “hellohellohello…” (
<p>) and a resizable textarea (
Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties
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?
I noticed that the behavior is correct when I remove the
display: block; CSS declaration from the
So the actual questions here are:
- why the textarea element’s margins become “fixed” in Chrome when using
display: block; in its CSS styling, and
- how to avoid this behavior in Chrome while keeping
display: 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…