Div added by javascript is placed offset when contentEditable=true
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: ronningstad, Unassigned)
References
Details
Attachments
(1 file)
|
2.95 KB,
image/png
|
Details |
firefox_bug.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0
Steps to reproduce:
Open an html file with the following contents:
<body>
<div id="orig" style="display: inline-block;border:1px solid black;"></div>
<div id="foo" style="display: inline-block;border:1px solid black;">foo</div>
<script>
let new_elem = document.getElementById("orig").cloneNode(true)
new_elem.setAttribute("contentEditable", true);
document.body.appendChild(new_elem)
</script>
</body>
Actual results:
The div produced ("new_elem") is offset upwards by some pixels compared to the other divs. See image for comparison between Firefox and Edge.
The placement corrects itself when I start editing it.
Expected results:
The new div should be in line with the others.
|
Reporter | |
Comment 1•7 months ago
|
||
Turns out you don't need the javascript, the div just needs to be empty and have contentEditable="true". The below example produces the same effect as the one in the original post.
<div style="display: inline-block;border:1px solid black;"></div>
<div style="display: inline-block;border:1px solid black;">foo</div>
<div style="display: inline-block;border:1px solid black;" contentEditable="true"></div>
|
||
Updated•7 months ago
|
|
||
Comment 2•7 months ago
|
||
After Bug 1098151 is fixed: This bug appears.
|
||
Comment 3•7 months ago
|
||
This is because we give it a height, but it has no baseline. It's effectively the same issue as bug 1723374.
Description
•