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
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).
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
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.)
6 years ago
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.
6 years ago
Depends on: css3-flexbox
Priority: -- → P4
You need to log in before you can comment on or make changes to this bug.