Rendering issue when an image with opacity overflows behind a link

Duplicate Issue #7189664 • See Issue #6943034

Details

Created
Apr 13, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #6943034
Found in build #
20.10240
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

There are several things that need to happen in order to reproduce this.

  1. Navigation (potentially other content) that is absolutely positioned
  2. Navigation that changes background (possibly other properties too) on hover
  3. An (large) image which is vertically centered (accomplished with flexbox). The image’s container must be overflow:hidden. The image must extend above the container so that part of it is ‘under’ the navigation.
  4. The image must have opacity applied to it
    Expected results: The link should switch to a different background on hover
    Actual Results: The red link becomes invisible
    For details see https://mfairchild365.com/bugs/opacity-edge.html
    or http://jsfiddle.net/91m8v43t/6/
    Note: This is only happening in edge.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To to “Christian F.”

      Changed Assigned To from “Christian F.” to “Scott B.”

      Changed Status to “Confirmed”

      Changed Status from “Confirmed” to “Duplicate”

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

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

    Sign in