Bug 213901

Summary:

content which has transition property passed, programmatic focus outline is not visually available

Product:

WebKit

Reporter:

Riktika <riktika_sharma>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Major

CC:

rego

Priority:

Version:

Safari 13

Hardware:

Mac

OS:

macOS 10.15

Attachments:

Description	Flags
test-case	none
issue-recording	none

Riktika

Reported 2020-07-02 15:11:43 PDT

Created attachment 403404 [details] test-case The newly loaded content which has transition CSS property applied to it, and on click, the programmatic focus should go to the content. The focus does go to the content, but the focus outline flashes for a second and doesn't stay onto the content. For reference test-case attached. transition property to the content - .fade-transform-in { -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: all .66s 0s cubic-bezier(0.66, 0, 0.2, 1); transition: all .66s 0s cubic-bezier(0.66, 0, 0.2, 1); } :focus{ outline: 4px solid #000; outline-offset: 1px; }

Attachments
test-case (1.70 KB, text/html) 2020-07-02 15:11 PDT, Riktika	no flags	Details
issue-recording (1.95 MB, video/quicktime) 2020-07-02 15:12 PDT, Riktika	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Riktika

Comment 1 2020-07-02 15:12:53 PDT

Created attachment 403406 [details] issue-recording

Manuel Rego Casasnovas

Comment 2 2021-11-25 04:13:15 PST

I believe this is a duplicate of #173708, as "outline" is not properly animated when it has "transition" property. *** This bug has been marked as a duplicate of bug 173708 ***

Note You need to log in before you can comment on or make changes to this bug.