JJmonterey's picture

Posted by JJmonterey on Thu, Jan 04, 2018 - 6:03am

Hero Rendering DifferenceThe hero image renders darker in IE and Edge than in Chrome or Firefox.  Any idea why?

Comments

Fri, Jan 05, 2018 - 7:05am by amilenkov

I guess because the CSS code that manages this element is:

.block-hero-no-image {
    background-blend-mode: luminosity;
    background-color: #0074bd;
    background-image: url("/core/themes/basis/images/texture.png");
    background-position: center center;
    background-repeat: repeat;
}

The background-blend-mode CSS3 property is not supported by Microsoft browsers:

https://www.w3schools.com/cssref/pr_background-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

I would recommend to use another CSS technique for this block - for example CSS opacity or RGBA color.

Or may be simply color texture.png file.