Menu icon Foundation
Bug with Interchange & Magellan

DEMO
Please see this pen for an example:

http://codepen.io/auginator/pen/NxBdEE?editors=1010

DESCRIPTION
I think I found a bug when using interchange and Magellan together. The magellan sticky position seems to be calculated before Interchange does it's replacement, making the magellan nav go sticky at the wrong scroll position.

I have tried getting foundation to reflow in as many ways as I can think of, using the follwoing methods.

$(document).foundation(); //just calling foundation again, even from dev tools way after page load
$(document).foundation('reflow'); //this also does nothing, as I think F5 is not seeing the new image source as a change to the dom??

//Presumably, the way I have in the pen would be the right way: 
//This event fires as expected, but reflow attempts do nothing... try it out in my pen.

    $(document).on('replace', 'img', function (e, new_path, original_path) {
		//none of these work, go ahead and try
		//$(document).foundation(); 
		$(document).foundation('reflow');
		$(document).foundation('magellan', 'reflow');
	});
	
            

         

FoundationReflowMagellaninterchange5.5.3

DEMO
Please see this pen for an example:

http://codepen.io/auginator/pen/NxBdEE?editors=1010

DESCRIPTION
I think I found a bug when using interchange and Magellan together. The magellan sticky position seems to be calculated before Interchange does it's replacement, making the magellan nav go sticky at the wrong scroll position.

I have tried getting foundation to reflow in as many ways as I can think of, using the follwoing methods.

$(document).foundation(); //just calling foundation again, even from dev tools way after page load
$(document).foundation('reflow'); //this also does nothing, as I think F5 is not seeing the new image source as a change to the dom??

//Presumably, the way I have in the pen would be the right way: 
//This event fires as expected, but reflow attempts do nothing... try it out in my pen.

    $(document).on('replace', 'img', function (e, new_path, original_path) {
		//none of these work, go ahead and try
		//$(document).foundation(); 
		$(document).foundation('reflow');
		$(document).foundation('magellan', 'reflow');
	});
	
            

         
Agustin Sevilla over 3 years ago

Quick update: I made a slightly disgusting bit of CSS to patch this bug.

I used the old fixed aspect ratio CSS technique (see the foundation flex-video component for a sensible use of it) to make sure that the image's container was the correct size with media queries before interchange does it's thing. I have one ratio per breakpoint which match the aspect ratios for the images that interchange will load.