I have a weird bug on Edge browser.
Scenario
I have a filter applied to an image to make it greyscale and inverted, which is removed upon hovering on the image. However these are only shown upon a hover "max-height" transition to the parent container, so it has a drop-down effect.
Issue
When the parent container drops down, it only partially renders the image. On my live site it can load anywhere between 10% and 90% of the image as the drop-down is a lot longer and these images are at the bottom, however in my example below it only renders the very top of the image so you can just make out the top of the image.
The issue is rectified by removing either the transition from the parent container, or by removing the filter from the image. It would appear that both of these things together are causing the issue.
Live Example (Fiddle & Snippet)
html, body {
height: 100%;
width: 100%;
}
body {
background: grey;
}
body:hover .sfHeader-companiesLinks {
max-height: 200px;
}
.sfHeader-companiesLinks {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
height: 50px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94)
}
.sfHeader-companiesLink {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0px;
-moz-box-flex: 1;
-moz-flex: 1 0 0px;
-ms-flex: 1 0 0px;
flex: 1 0 0px;
-webkit-filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
background-repeat: no-repeat;
background-size: 100% 100%;
height: 50px;
max-width: 150px;
text-align: center;
}
.sfHeader-companiesLink:hover,
.sfHeader-companiesLink:active,
.sfHeader-companiesLink:focus {
-webkit-filter: unset;
filter: unset;
}<p>Hover over the body</p>
<div class="sfHeader-companiesLinks">
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/ebay"></a>
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/amazon"></a>
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/magento"></a>
</div>Things tried (and failed)
- Making the image an
imgelement instead of a background image - Making the filter only apply when the body is hovered
Issue recreation
I realise perhaps those on fruit flavoured OS may not be able to reproduce, so I created an animated GIF of the issue:
Conclusion
I'm looking for any sort of workaround to allow me to keep this functionality. All mad suggestions will be taken into consideration! I'm well aware that the filter doesn't work in IE11 anyway. Seems to work correctly in both Chrome and Firefox. Thank you.
