| 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: | P2 | ||||||||
| Version: | Safari 13 | ||||||||
| Hardware: | Mac | ||||||||
| OS: | macOS 10.15 | ||||||||
| Attachments: |
|
||||||||
Created attachment 403406 [details]
issue-recording
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 *** |
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; }