[Resolved] IE Edge Issues

[Andy]

OMG! – I’ve found the cause of the flickering issue!!!!!!!!!!!!!!!!!!!!!!!!!!!

It’s because I have the Raleway font already installed on my system and I’m also using the font on the site, this was obviously confusing the browser as it didnt know whether to load the web version of the font or my local version!!!. After deleting Raleway from my system the flickering has stopped!!!.

Werhoooooo! 😀

Now just to work out the cause of those lines of the nav bar when hovering over it, although I feel this will be even more difficult to diagnose.

[Tom]

Wow, what a strange bug – hopefully Edge is able to sort that out sooner than later.

Glad you solved it! 🙂

[Andy]

Thanks, although I suspect they are not even aware of it :s

Regarding the top and bottom lines appearing on navigation hover, when I change the Customizer settings for the Primary Navigation from Below Header to Float Right it appears to fix this issue in my Edge Browser.

Can you confirm it also solves the issue in your Edge browser on the preview url?.

If so, any ideas what extra CSS is added by the GP theme in the Below Header setting? I tried switching to the Parent theme but it makes no difference so I dont think it can be any styles I’ve added.

[Tom]

No extra CSS between the two positions at all except one floats right and one doesn’t.

Does the same thing happen to you on http://speedtest.generatepress.com?

[Andy]

Hmm, no but that has no hover effect.

[Andy]

Werhoooo, almost squashed this bug too.

When I remove the following code from my functions file the lines on hover disappear!:

/* Reorders Logo & Widget positions */

if ( ! function_exists( 'generate_header_items' ) ) :
/**
 * Build the header
 *
 * Wrapping this into a function allows us to customize the order
 *
 * @since 1.2.9.7
 */
function generate_header_items() 
{
	// Site title and tagline
	generate_construct_site_title();
	
	// Site logo
	generate_construct_logo();

	// Header widget
	generate_construct_header_widget();
}
endif;

Can you confirm they have also been removed for you too? – if so, any ideas why its causing this and what I could do to achieve the desired result?

[Tom]

That code is what creates the header area, so removing that isn’t really an option.

I just added another page to the speedtest site to test – I’m not seeing any issues in Edge.

[Andy]

Could you try adding that code I posted above that reorders the logo/widget to the speedtest functions file and see if it creates the issue?.

[Tom]

Just tried it on my localhost and didn’t notice any issues.

Checked your site again and I’m not noticing the issue anymore on Edge, however I am seeing a overlap of your logo over the menu.

[Andy]

Yes your seeing the overlap because I removed that code from the functions file, it fixes the hover lines issue in Microsoft Edge but then messes up the header layout.

[Tom]

I just replicated your header on my localhost (header image and header widget) and added that code – no line issue in Edge.

So it could be:

a) A bug in the widgets you’re using
b) A bug in your custom CSS (I’m seeing negative margin etc.. which can be buggy)

[Andy]

ok, but when I switch from my child theme to GP the problem remains, does it for you? :S

[Andy]

Can you see anything wrong with this code below, if I remove it from my wp_head GP Hook the problem goes away!:

<div class="top-bar">
<div class="grid-container grid-parent"><a style="float:right;" href="http://preview.qualitycompliments.co.uk/my-account/">LOGIN / REGISTER</a></div>
</div>

There are no styles applied to that div other than the inline float because I only have the parent GP theme active.

[Tom]

Hmm, nope – don’t see anything wrong with that at all.

How are you adding that HTML?

[Andy]

Using the GP Hooks Add-on that comes with GP Premium.

As you can see now I’ve removed it the problem goes away :s

[Author]

Posts