Bug 213901 - content which has transition property passed, programmatic focus outline is not visually available
Summary: content which has transition property passed, programmatic focus outline is n...
Status: RESOLVED DUPLICATE of bug 173708
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-07-02 15:11 PDT by Riktika
Modified: 2021-11-25 04:13 PST (History)
1 user (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Riktika 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;
}
Comment 1 Riktika 2020-07-02 15:12:53 PDT 
Created attachment 403406 [details]
issue-recording
Comment 2 Manuel Rego Casasnovas 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 ***