Streaming live at 10am (PST)

Fixed background images in IE and Edge issues


#1

I have now noticed this across several of my sites it is annoying. It is definitely a browser issue. From what I am reading it has something to do with the Z-index. IS there a way to set the Z index for the background Images? Or maybe someway for webflow to test the possibility of a fix for this.

This is the current site I am having issues with.

https://preview.webflow.com/preview/vigilance?preview=154a84095178f1bbd316205badc331ea

it definitely seems to be an explorer issue.

thanks
Jeremy


#2

HI @jbleroux, thanks for the report.

Do you have any screenshots of the images in the designer and how they are not working in IE and edge?

Is the issue happening on the home page or other pages? It is not possible to set a z-index on a background image, but you can assign a background image to an element, say a div, and then give that div some z-index. I do this for sites that need fixed background image on mobile, by setting the div class to be full page width and height, and then i set the z-index on the div having the fixed background image set to -1.

Thanks in advance, I am standing by for your response!


#3

Hi Dave, I realized that I didn't explain the issue above. It is jumpy/jittery scroll. Nothing I can screenshot will show this. From all my reading it seems to be a longstanding, ongoing issue with Microsoft and only Microsoft internet web browsers.

Would there be some extra code that could possibly work with webflow? Besides basic tweaks I'm not that proficient with adding code to particular elements

thanks
Jeremy


#4

Hi @jbleroux, could you try pasting in the following code to the head of the site, as the first line of script:

<script>
if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
        $('body').on("mousewheel", function () {
            // remove default behavior
            event.preventDefault(); 

            //scroll without smoothing
            var wheelDelta = event.wheelDelta;
            var currentScrollPosition = window.pageYOffset;
            window.scrollTo(0, currentScrollPosition - wheelDelta);
        });
}
</script>

Republish the site and then let me know? I am interested to see if this will work as a solution from: https://coderwall.com/p/hlqqia/ie-fix-for-jumpy-fixed-bacground

Thanks in advance!


#5

Nope that doesn't fix it. Seems from my research, Microsoft has had this issue for years and haven't fixed it. The problem is fixed backgrounds are becoming a standard thing. Although obviously in mobile they have their issues. Gonna try adding another div, and then giving that a z class. Another suggestion.


#6

@cyberdave that is a fix. It does have to do with the z positioning. I gave the section a class and called it mainContent and set the position to relative. I added a div called backgroundMain I give it a position absolute and full, then I gave it a Z of -1. I went back and gave the containers z index of 10. Just tested it in edge. No more stutter. So if there would be a way to give a background element a z index by itself. It might just eliminate that completely in Webflow.

always
Jer


#7

@cyberdave since I already have this open I found a new SVG issue. The svg I have of an arabic title seesm to be having issues in Webflow. You can use the same link. I will have to use png's if I can't get this 100% but the svg is definitely clearer. The SVG in question intermittently shows up viewable in Webflow assest. Other times it is not showing up. That is making it not show up on the site consistently. It was working and now has stopped.

thanks
Jeremy


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.