IE11 and Edge display incorrect transition animation for opacity on table element

Issue #10135182 • Assigned to Rick J.

Details

Author
Rustam M.
Created
Dec 9, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

JSFiddle: https://jsfiddle.net/yhgz75w7/ - see how transition plays very differently depending on type of an element it is applied to.

HTML:

<div class="parent">
  <table class="child">
    <tr>
      <td>hover me: invalid transition timing</td>
    </tr>
  </table><div class="parent">
  <table class="child">
    <tr>
      <td>hover me: invalid transition timing</td>
    </tr>
  </table>
</div>
<br>
<div class="parent">
  <div class="child">
    <div>hover me: valid transition timing</div>
  </div>
  <div class="parent">
    <table class="child">
      <tr>
        <td>hover me: invalid transition timing</td>
      </tr>
    </table>
  </div>
  <br>
  <div class="parent">
    <div class="child">
      <div>hover me: valid transition timing</div>
    </div>
  </div>
</div>

</div>
<br>
<div class="parent">
  <div class="child">
    <div>hover me: valid transition timing</div>
  </div>
  <div class="parent">
    <table class="child">
      <tr>
        <td>hover me: invalid transition timing</td>
      </tr>
    </table>
  </div>
  <br>
  <div class="parent">
    <div class="child">
      <div>hover me: valid transition timing</div>
    </div>
  </div>
</div>

CSS:

.parent {
  width: 100%;
  height: 100px;
  background-color: black;
  position: relative;
}

.child {
  background-color: white;
  opacity: 0.5;
  transition: opacity 0.5s linear;
  width: 100%;
  height: 100%;
}

.child:hover {
  opacity: 1;
}

Expected result: both transition animations should look the same.
Actual result: opacity on table element doesn’t change linearly and instead becomes lower then at the start and then goes up.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Rick J.”

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

    Sign in