Cursor height in contenteditable div includes padding/margin bottom with ::before content
Reported by
g...@needhamsoftware.com,
Aug 20 2016
|
|||||
Issue descriptionUserAgent: 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 ;
,
Aug 22 2016
Confirmed on OSX 10.11.6 and Ubuntu 14.04, Chrome 52.0.2743.116.
,
Aug 22 2016
,
Dec 2 2016
,
Feb 11 2017
Chrome now uses font-height as caret height since http://crrev.com/442830, Jan 11, 2017. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by g...@needhamsoftware.com
, Aug 20 2016