CSS hover removing border-bottom of element in Edge

Confirmed Issue #7119159 • Assigned to Brian M.

Details

Created
Apr 5, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 6 people

Sign in to watch or report this issue.

Steps to reproduce

Please try this in the edge browser. On hovering over the links, the border-bottom randomly disappears and reappears.
HTML
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
CSS
a{
display: block;
background: blue;
padding: 10px 30px;
color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid gray;
}
a:hover{
color: white;
}

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To to “Christian F.”

      Changed Assigned To from “Christian F.” to “Brian M.”

      Changed Status to “Confirmed”

    • Occurs with my code as well.

      Some Name
      

      /* User Tag Styles */
      @keyframes select {
      from {
      .chatroom-userTag;
      } to {
      .chatroom-userTag-selected;
      }
      }
      .chatroom-userTag {
      padding: 5px;
      overflow: hidden;
      border-bottom: solid 1px lightgray;
      }

      .chatroom-userTag:hover {
      animation-name: select;
      animation-duration: .25s;
      animation-fill-mode: forwards;
      cursor: pointer;
      }
      .chatroom-userTag-selected {
      .eci-chatroom-userTag;
      background-color: @chatroom-color;
      }

      .chatroom-nameTag {
      height: 25px;
      width: 100%;
      color: @text-color-white;
      line-height: 25px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-family: @chatroom-font;
      font-size: 12px;
      font-weight: bold;
      }

    • HTML

      Some Name
    • Is it something to do with 'hover’?

      I wanted my text to change blue when hovered over. Works fine on Chrome. It flickers on EDGE every time you hover over it

    • Left is Edge, followed by Firefox and finally Chrome. Works fine in IE11 as well.

      Bug preview

      Is this getting fixed any time soon or do I just ignore Edge altogether?

    • Related issue if you remove the borders and change every second row to a different background color. Ex: gray then green etc. Also set a padding for the numbers or text with ex: 15px.

      Then click and drag mouse over up and down the rows so the text gets selected, some of the divs will grow over the other with 1 pixel.

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

    Sign in