New issue
Advanced search Search tips

Issue 639617 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat



Sign in to add a comment

Cursor height in contenteditable div includes padding/margin bottom with ::before content

Reported by g...@needhamsoftware.com, Aug 20 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0

Example URL:

Steps to reproduce the problem:
1. See https://bugs.chromium.org/p/chromium/issues/detail?id=314223
2. 
3. 

What is the expected behavior?
cursor remains within element

What went wrong?
cursor descends below rendered element

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: Version 52.0.2743.116 (64-bit)  Channel: n/a
OS Version: OS X 10.11
Flash Version: Shockwave Flash 20.0 r0

Sorry site is in development and not released I cannot provide a link. Computed styles for the offending div are as follows (pasted from inspector):

align-content:
normal
;
align-items:
stretch
;
align-self:
stretch
;
alignment-baseline:
auto
;
animation-delay:
0s
;
animation-direction:
normal
;
animation-duration:
0s
;
animation-fill-mode:
none
;
animation-iteration-count:
1
;
animation-name:
none
;
animation-play-state:
running
;
animation-timing-function:
ease
;
backface-visibility:
visible
;
background-attachment:
scroll
;
background-blend-mode:
normal
;
background-clip:
border-box
;
background-color:
rgb(255, 255, 255)
;
background-image:
none
;
background-origin:
padding-box
;
background-position:
0% 0%
;
background-repeat:
repeat
;
background-size:
auto
;
baseline-shift:
0px
;
border-bottom-color:
rgb(187, 187, 187)
;
border-bottom-left-radius:
0px
;
border-bottom-right-radius:
0px
;
border-bottom-style:
solid
;
border-bottom-width:
1px
;
border-collapse:
separate
;
border-image-outset:
0px
;
border-image-repeat:
stretch
;
border-image-slice:
100%
;
border-image-source:
none
;
border-image-width:
1
;
border-left-color:
rgb(187, 187, 187)
;
border-left-style:
solid
;
border-left-width:
1px
;
border-right-color:
rgb(187, 187, 187)
;
border-right-style:
solid
;
border-right-width:
1px
;
border-top-color:
rgb(187, 187, 187)
;
border-top-left-radius:
0px
;
border-top-right-radius:
0px
;
border-top-style:
solid
;
border-top-width:
1px
;
bottom:
auto
;
box-shadow:
none
;
box-sizing:
border-box
;
break-after:
auto
;
break-before:
auto
;
break-inside:
auto
;
buffered-rendering:
auto
;
caption-side:
top
;
clear:
none
;
clip:
auto
;
clip-path:
none
;
clip-rule:
nonzero
;
color:
rgb(0, 0, 0)
;
color-interpolation:
sRGB
;
color-interpolation-filters:
linearRGB
;
color-rendering:
auto
;
column-count:
auto
;
column-gap:
normal
;
column-rule-color:
rgb(0, 0, 0)
;
column-rule-style:
none
;
column-rule-width:
0px
;
column-span:
none
;
column-width:
auto
;
cursor:
auto
;
cx:
0px
;
cy:
0px
;
d:
none
;
direction:
ltr
;
display:
inline-block
;
dominant-baseline:
auto
;
empty-cells:
show
;
fill:
rgb(0, 0, 0)
;
fill-opacity:
1
;
fill-rule:
nonzero
;
filter:
none
;
flex-basis:
auto
;
flex-direction:
row
;
flex-grow:
0
;
flex-shrink:
1
;
flex-wrap:
nowrap
;
float:
none
;
flood-color:
rgb(0, 0, 0)
;
flood-opacity:
1
;
font-family:
"Open Sans", Helvetica, Arial, sans-serif
;
font-kerning:
auto
;
font-size:
12px
;
font-stretch:
normal
;
font-style:
normal
;
font-variant:
normal
;
font-variant-caps:
normal
;
font-variant-ligatures:
normal
;
font-variant-numeric:
normal
;
font-weight:
normal
;
height:
25px
;
image-rendering:
auto
;
isolation:
auto
;
justify-content:
normal
;
left:
auto
;
letter-spacing:
normal
;
lighting-color:
rgb(255, 255, 255)
;
line-height:
20px
;
list-style-image:
none
;
list-style-position:
outside
;
list-style-type:
disc
;
margin-bottom:
0px
;
margin-left:
0px
;
margin-right:
0px
;
margin-top:
0px
;
marker-end:
none
;
marker-mid:
none
;
marker-start:
none
;
mask:
none
;
mask-type:
luminance
;
max-height:
none
;
max-width:
none
;
min-height:
0px
;
min-width:
0px
;
mix-blend-mode:
normal
;
motion-offset:
0px
;
motion-path:
none
;
motion-rotation:
auto 0deg
;
object-fit:
fill
;
object-position:
50% 50%
;
opacity:
1
;
order:
0
;
orphans:
2
;
outline-color:
rgb(0, 0, 0)
;
outline-offset:
0px
;
outline-style:
none
;
outline-width:
0px
;
overflow-wrap:
break-word
;
overflow-x:
visible
;
overflow-y:
visible
;
padding-bottom:
3px
;
padding-left:
5px
;
padding-right:
5px
;
padding-top:
3px
;
paint-order:
fill stroke markers
;
perspective:
none
;
perspective-origin:
140px 12.5px
;
pointer-events:
auto
;
position:
static
;
r:
0px
;
resize:
none
;
right:
auto
;
rx:
0px
;
ry:
0px
;
shape-image-threshold:
0
;
shape-margin:
0px
;
shape-outside:
none
;
shape-rendering:
auto
;
speak:
normal
;
stop-color:
rgb(0, 0, 0)
;
stop-opacity:
1
;
stroke:
none
;
stroke-dasharray:
none
;
stroke-dashoffset:
0px
;
stroke-linecap:
butt
;
stroke-linejoin:
miter
;
stroke-miterlimit:
4
;
stroke-opacity:
1
;
stroke-width:
1px
;
tab-size:
8
;
table-layout:
auto
;
text-align:
start
;
text-align-last:
auto
;
text-anchor:
start
;
text-decoration:
none
;
text-indent:
0px
;
text-overflow:
clip
;
text-rendering:
auto
;
text-shadow:
none
;
text-transform:
none
;
top:
auto
;
touch-action:
auto
;
transform:
none
;
transform-origin:
140px 12.5px
;
transform-style:
flat
;
transition-delay:
0s
;
transition-duration:
0s
;
transition-property:
all
;
transition-timing-function:
ease
;
unicode-bidi:
normal
;
vector-effect:
none
;
vertical-align:
baseline
;
visibility:
visible
;
white-space:
normal
;
widows:
2
;
width:
280px
;
will-change:
auto
;
word-break:
normal
;
word-spacing:
0px
;
word-wrap:
break-word
;
writing-mode:
horizontal-tb
;
x:
0px
;
y:
0px
;
z-index:
auto
;
zoom:
1
;
-webkit-app-region:
no-drag
;
-webkit-appearance:
none
;
-webkit-border-horizontal-spacing:
0px
;
-webkit-border-vertical-spacing:
0px
;
-webkit-box-align:
stretch
;
-webkit-box-decoration-break:
slice
;
-webkit-box-direction:
normal
;
-webkit-box-flex:
0
;
-webkit-box-flex-group:
1
;
-webkit-box-lines:
single
;
-webkit-box-ordinal-group:
1
;
-webkit-box-orient:
horizontal
;
-webkit-box-pack:
start
;
-webkit-box-reflect:
none
;
-webkit-font-smoothing:
auto
;
-webkit-highlight:
none
;
-webkit-hyphenate-character:
auto
;
-webkit-line-break:
after-white-space
;
-webkit-line-clamp:
none
;
-webkit-locale:
auto
;
-webkit-margin-after-collapse:
collapse
;
-webkit-margin-before-collapse:
collapse
;
-webkit-mask-box-image:
none
;
-webkit-mask-box-image-outset:
0px
;
-webkit-mask-box-image-repeat:
stretch
;
-webkit-mask-box-image-slice:
0 fill
;
-webkit-mask-box-image-source:
none
;
-webkit-mask-box-image-width:
auto
;
-webkit-mask-clip:
border-box
;
-webkit-mask-composite:
source-over
;
-webkit-mask-image:
none
;
-webkit-mask-origin:
border-box
;
-webkit-mask-position:
0% 0%
;
-webkit-mask-repeat:
repeat
;
-webkit-mask-size:
auto
;
-webkit-print-color-adjust:
economy
;
-webkit-rtl-ordering:
logical
;
-webkit-tap-highlight-color:
rgba(0, 0, 0, 0)
;
-webkit-text-combine:
none
;
-webkit-text-decorations-in-effect:
none
;
-webkit-text-emphasis-color:
rgb(0, 0, 0)
;
-webkit-text-emphasis-position:
over
;
-webkit-text-emphasis-style:
none
;
-webkit-text-fill-color:
rgb(0, 0, 0)
;
-webkit-text-security:
none
;
-webkit-text-stroke-color:
rgb(0, 0, 0)
;
-webkit-text-stroke-width:
0px
;
-webkit-user-drag:
auto
;
-webkit-user-modify:
read-write
;
-webkit-user-select:
text
;
-webkit-border-image:
none
;
-webkit-text-orientation:
vertical-right
;
 
Screen Shot 2016-08-20 at 2.44.07 PM.png
9.0 KB View Download
Screen Shot 2016-08-20 at 2.49.14 PM.png
9.8 KB View Download
Actually, I just realized that this isn't necessarily an exact regression. It only occurs with content added at the beginning (to control height issues in FF) as in this fiddle: 

http://jsfiddle.net/m4eehzn3/

See http://stackoverflow.com/questions/23530231/contenteditable-true-height-issue-in-firefox for why the feff character is needed.
Components: Blink>Editing Blink>Layout
Labels: -OS-Mac OS-All
Status: Untriaged (was: Unconfirmed)
Summary: Cursor height in contenteditable div includes padding/margin bottom with ::before content (was: Regression of 314223)
Confirmed on OSX 10.11.6 and Ubuntu 14.04, Chrome 52.0.2743.116.

Comment 3 by e...@chromium.org, Aug 22 2016

Owner: yosin@chromium.org
Status: Available (was: Untriaged)

Comment 4 by yosin@chromium.org, Dec 2 2016

Owner: ----

Comment 5 by yosin@chromium.org, Feb 11 2017

Status: Fixed (was: Available)
Chrome now uses font-height as caret height since http://crrev.com/442830, Jan 11, 2017.

Sign in to add a comment