Created
October 21, 2018 15:17
-
-
Save MarieComet/d0faabe4bad17f6d5624555ef6f95dc6 to your computer and use it in GitHub Desktop.
Fallback for Divi overlays option in EDGE/IE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* IE / EDGE */ | |
| .overlayDiv { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* DIVI OVERLAY FALLBACK IE / EDGE */ | |
| // detect if background-blend-mode property supported | |
| var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode; | |
| if(typeof supportsBackgroundBlendMode === "undefined") { | |
| // select all element with background set | |
| var elementsWithBackground = document.querySelectorAll('.et_pb_with_background'); | |
| if( elementsWithBackground ) { | |
| // transform as array for loop | |
| elementsWithBackground = Array.prototype.slice.call(elementsWithBackground); | |
| // loop on each element with background | |
| elementsWithBackground.forEach( function( element ) { | |
| var blendMode = window.getComputedStyle(element).backgroundBlendMode; | |
| if( typeof blendMode === 'undefined' ) { | |
| // create empty element | |
| var overlayDiv = document.createElement('div'); | |
| // give it the overlayDiv class (see CSS) | |
| overlayDiv.className = "overlayDiv"; | |
| // select the first child of the section | |
| var theFirstChild = element.firstChild; | |
| // insert overlay div just before the first child | |
| element.insertBefore(overlayDiv, theFirstChild); | |
| // set overlay div background color from the initial overlay backgroun color | |
| overlayDiv.style.backgroundColor = window.getComputedStyle(element).backgroundColor; | |
| } | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment