Image doesn't render fully when css filter applied and is shown using a css transition

Issue #10423235 • Assigned to Rick J.

Details

Created
Jan 5, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

The issue can be re-created here.

Hovering over the body I would expect to see three greyed out pictures of a cat. What I see is a thin line of the image, that only renders correctly when the image is hovered over (to remove the filter).

This issue doesn’t happen if either the css filter to the image is not applied, or the transition to the max-height of the parent is not applied.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

  • Thank you for the feedback on Edge. I have attached a screenshot showing what I see in my testing environment. Is this the exact problem you are describing? The gif you attached does not seem to describe the bug you are reporting as I expect.

    All the best,
    The MS Edge Team

  • Yes that image you uploaded seems to show the issue I’ve described, based upon the assumption that you hovered over the text and then over the middle cat to create that scenario.

  • The GIF I attached shows how the images don’t load properly on the first pass (you can just see the very top of the eBay logo before I hover over it). When I’ve hovered over it, it then removes the filter, causing the image to load properly. In the GIF the images were set to do the max-height transition when the body was receiving the hover state, and the images were set to remove the greyscale filter when they themselves were hovered. Does that help?

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

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

Sign in