CSS animation don't cancel css property

Issue #14277131 • Assigned to wptcomptri@microsoft.com

Details

Author
Jakub J.
Created
Oct 17, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I have this css (underline cursor animation) that work in other browsers:

.cursor {
    border-bottom: 5px solid transparent;
    margin-bottom: -3px;
    background-clip: content-box;
    width: 20px;
    display: block;
}
.cursor.blink {
    animation: terminal-underline 1s infinite steps(1, start);
    border-left: 1px solid transparent;
    margin-left: -1px;
}
@keyframes terminal-underline {
  0%, 100% {
      border-bottom-color: #aaa;
      position: relative;
      line-height: 12px;
      margin-top: 1px;
      border-left: none;
      margin-left: 0;
  }
  50% {
      border-bottom-color: #000;
      position: relative;
      line-height: 12px;
      margin-top: 1px;
      border-left: none;
      margin-left: 0;
  }
}

and border-left: none; don’t change the border to none in animation (it’s set to none for all keyframes so it should cancel that property set outside of animation) so the border is trapezoid, you can see demo here https://codepen.io/jcubic/pen/pWqyZG?editors=1100

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “wptcomptri@microsoft.com”

    You need to sign in to your Microsoft account to add a comment.

    Sign in