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 8 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.

    • +1

      I am also experiencing this issue with a list of div tags that have a border-bottom. The border disappears when moving the mouse up (vertically) over the items. Moving the mouse down over the items makes the border reappear. It is always like that: mouse up = dissapear, mouse down = reappear. You can see this behavior in the animated gif provided by Alen C.

      My temporary fix was to set the background color of the element containing my div tags to the color of the border, and then giving each div a bottom margin of 1px. The container element also needed a bottom border and the last div needed it’s bottom margin removed. Hope this helps someone else.

    • I have a fiddle here that shows the problem as well:
      https://jsfiddle.net/egx6Lpoq/2/

      It renders correctly initially, but hovering over the last two sets of divs will cause the border to disappear and reappear. The first two work correctly. It seems to matter whether the top px value is less than or greater than .5px, so maybe some rounding issue.

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

    Sign in