Open Bug 963247 Opened 6 years ago Updated 5 years ago

contenteditable flex container (flexbox) has mispositioned cursor, for inserting text as a direct child of the flex container.

Categories

(Core :: Layout, defect, P4)

defect

Tracking

()

People

(Reporter: hi, Unassigned)

References

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131205075310

Steps to reproduce:

See example: http://jsfiddle.net/L789y/3/

Basically, 

1. create a contenteditable field. 
2. Apply `display: flex;` style to it. 
3. Click in field.



Actual results:

Cursor appears too low in field


Expected results:

Cursor should appear with proper bottom baseline offset (see non-flex styled contenteditable field in example fiddle).
Attached file testcase 1
Confirmed. Here's the jsfiddle converted into an attached testcase (extended slightly to include a non-empty "display: flex" example).
(I can reproduce this in Nightly, 29.0a1 (2014-01-24), on Linux.)
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
OS: Mac OS X → All
Product: Firefox → Core
Hardware: x86 → All
Version: 26 Branch → Trunk
Attached file testcase 2
Here's a trickier testcase, using "justify-content" and "align-items" to position the text-insertion point at the bottom-center, alongside an image. (And where the presence or absence of text makes a difference about where the image / text ends up, due to how "justify-content:space-around" behaves.)
Summary: Flexbox styling on contenteditable field creates an offset text position cursor → contenteditable flex container (flexbox) has mispositioned cursor, for inserting text as a direct child of the flex container.
You need to log in before you can comment on or make changes to this bug.