New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 727698 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

CSS: Button :focus `outline-style: auto` on Mac OS X has outline around position absolute children

Reported by ericwhit...@gmail.com, May 30 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce the problem:
1. Go to: https://ember-twiddle.com/921205c2d36d38f8ae0b7829344eeb76?openFiles=styles.app.css%2Ctemplates.components.my-component.hbs using Chrome on Mac OS X
2. Hover over button and click to focus
3. Change css from:
.button:focus {
  outline: 5px auto green;
}
to
.button:focus {
  outline: 5px solid green;
}
 and you'll see the child tooltip no longer has focus outline

What is the expected behavior?
Child position absolute element shouldn't have outline. Safari Mac OS X has the same outline defaults (color just changed on example) as Chrome Mac OS X. But only chrome puts an outline around the tooltip child when focused.

What went wrong?
outline-style: auto; somehow causes position: absolute children to get an outline

Did this work before? N/A 

Chrome version: 58.0.3029.110  Channel: stable
OS Version: OS X 10.12.5
Flash Version:
 
Chrome outline auto.png
36.4 KB View Download
Chrome outline solid.png
234 KB View Download
Safari-outline auto.png
209 KB View Download
Components: -UI Blink
Components: -Blink Blink>Paint
Status: Untriaged (was: Unconfirmed)
Labels: PaintTeamTriaged-20170605 BugSource-User OS-Android OS-Chrome OS-Linux OS-Windows
Status: Available (was: Untriaged)
The issue seems to be CSS inheritance rather than painting. Although maybe we have a check for "is inherited" when painting the focus ring.

Happens on Linux too.
Components: -Blink>Paint Blink>CSS
Status: Untriaged (was: Available)
Labels: Needs-Bisect
Able to repro on Chrome stable 58.0.3029.110 and tip of tree 61.0.3122.0

Requesting bisect

Comment 6 by r...@opera.com, Jun 6 2017

Components: -Blink>CSS Blink>Layout Blink>Paint
Not style, this is an intentional painting thing according to:

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/LayoutObject.h?l=1619-1622

Note that Gecko encloses the absolute positioned descendant in a simple rect, not a complex path, in its outline rendering.

Comment 7 by r...@opera.com, Jun 6 2017

Cc: r...@opera.com
Components: -Blink>Layout
Labels: -Needs-Bisect
Status: Available (was: Untriaged)
Thanks for the investigation. Seems like an old issue.
Project Member

Comment 9 by sheriffbot@chromium.org, Jun 7 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Available (was: Untriaged)

Sign in to add a comment