Sticky header issue: Internet Explorer 11

[Katie Sutton]

Hello (again),
My page headers are “naked” but my sticky header is white (with slight transparency). On all browsers, when I scroll back to top of page, the header becomes transparent once again. On IE11 when you scroll back up to the top, the header stays white, obscuring the content. Can you help?
Thanks… almost there….
Katie
user: demo
password:katie8demo

[Katie Sutton]

Sending a screenshot so you see what I mean. When I return to top of page, header is still white instead of naked. Happening on Microsoft Edge browsers. Gosh I am not a fan of IE. I am not having the problem on my IE11. Do you have a fix for this? Thanks!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Will forward this situation to the development team.

-Rui

[Katie Sutton]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Katie,

Have tried to replicate this in our IE11 test environment, but have failed to do so. Do you have anymore requirements for the system to replicate this? what version of windows, etc?

– Ed

[Katie Sutton]

This reply has been marked as private.

[Katie Sutton]

One thing my client noticed was the header “flashing” and I added, quite some time ago, this code to the child theme css… because i read it in one of your forums. I’m not sure I totally understand it but I wonder if it could be causing this issue for some reason?? Just a thought.
THanks,
Katie
/*stop sticky header flashing */
#header-section header {
position: fixed!important;
right: 0;
left: 0;
}

[Swift Ideas – Ed]

I’ve tried IE11 / Edge on all setups I can and can’t replicate at all, very odd. Can you please check that they don’t have “Compatibility Mode” enabled?

That css shouldn’t effect it, but you could test without it.

– Ed

[Katie Sutton]

I got a hold of a new Dell running Windows 10 with Edge and I am able to replicate it on Edge on a local machine and my client is seeing it too. The sticky header does not go back to transparent when scrolling back up the page. Looks like the screenshot I sent. NOT an issue on IE11 as best I can tell. Happening on all of my pages.

[Swift Ideas – Ed]

Hmm, just seen you are using same browser version. Very frustrating. Is it only a certain browser size maybe? What resolution are you testing?

Can you also check to see that a “Compatibility mode” isn’t enabled on the browser?

– Ed

[Katie Sutton]

I don’t think that Edge has compatibility mode. Their solution is “Open with IE11” as far as I can tell. When I do that, everything is hunky dorey. It’s an edge thing. Sticky issue happens whenever screen size is large enough to not show the mobile header. Not sure what you mean by resolution. However, I’ve seen it on my colleague’s Edge, my client is seeing it, and a friend of mine with Edge also sees it — are you not seeing it on Edge? Thanks, Katie

[Swift Ideas – Ed]

Tested on the edge version I showed in the other topic, and have 100% been unable to replicate. Which was why I was trying to determine if there were any other variables that came into play, in order to see the issue.

– Ed

[Katie Sutton]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Katie,

I know – it may be due to the test environment we use, but it’s usually spot on. Are you able to replicate this issue on our demo site at all?

– Ed