homepage - IE/Microsoft Edge detection link javascript bug

[kjhollen]

(moving over from https://github.com/processing/p5.js/issues/2795, thanks @caswallon! I can't verify this one because I don't have a windows computer... please feel free to close if no longer an issue.)

On the P5.js website itself, there is a bug in the script that is intended to fix a CSS issue with the links on Microsoft IE/EDGE.

var EDGE_IE_REGEX = /(?:\b(MS)?IE\s+|\bTrident/7.0;.*\s+rv:|\bEdge/)(\d+)/; if (EDGE_IE_REGEX.test(navigator.userAgent)) { var links = document.getElementsByTagName('a'); for (var i=0, l=btns.length; i < l; i++) { links[i].style.display = 'inline-block'; } }

In the code snippet above, there is a reference to a variable btns that does not exist and should probably be referencing links based on context.

This appears to only apply to the homepage.

[brysonian]

Maybe a CSS only solution would be cleaner and easier to maintain?

Edge can be handled with:

@supports (-ms-ime-align:auto) {
	a {
		display: inline-block;
	}
}

and ie with:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	a {
		display: inline-block;
	}
}

[bachmanetti]

@kjhollen The bug is still there, specifically the for loop for (var i=0, l=btns.length; i < l; i++) { should be for (var i=0, l=links.length; i < l; i++) {

Although, I agree with @brysonian, a CSS solution would be better. Unfortunately, IE/Edge do require the display:inline-block; to get the hover effect to work correctly. However this also causes a jump due to the changing link height on hover. (Which while not ideal is at least manageable.)