1218490 - Layout Changed On Reload

Status: RESOLVED INVALID

(Core :: DOM: Events, defect)

Description

[Evan Langlois]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20151019115626

Steps to reproduce:

Go to http://geordypearson.com/
Click Menu, Click a Gallery


Actual results:

First Image is huge and wrong aspect ratio.  Rest of images can't be seen as it takes up the whole viewport.

Clicking Reload of the page fixes this.  Problem does not happen with Chrome


Expected results:

The javascript specifically gets the window height, but it's initially reported as an insanely large number.  It then uses the image aspect ratio to set the width and height of the image so that all the images are sized to a uniform height, which depends on the browser size.

Firefox shouldn't report one size on initial load and only the correct size when you reload.

Comment 1

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

The data-ratio attribute added to the images is wrong, likely because the height is fetched while the image is still loading. If you serve width and height as attributes (the filenames show that they are available), the issue should be gone.

Comment 2

[Evan Langlois]

The height is of the window, not the image.  This works fine under Chrome.  It is not my site.  What you are saying is that if a site doesn't display properly it's the designers fault.  This flies in the face of the fact that ...
  1 - A reload fixes it.  Think about that!
  2 - The Height returned initially is totally bogus (more pixels than 20 screens)
  3 - Chrome always works

Basically, if you want a hassle free experience on the web, use Chrome.  Firefox is slow, has choppy animations, crashes, and when it does stupid **** the developers blame the designers and the poor user is left with a horrible experience.

Thanks.   I wont waste my time with this anymore.

Comment 3

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

(In reply to Evan Langlois from comment #2)
>   1 - A reload fixes it.  Think about that!
That's because the image get loaded from the browser cache and are near instantly available.
>   2 - The Height returned initially is totally bogus (more pixels than 20
> screens)
Which height in the script?
Here is what happens:
1. Page structure has been parsed, images are still loading. vertLife gets called from jQuery's ready().
2. This tries to get the width and height of the images. The first part of the image contains the top, meaning full width and the height is unknown. It's only known that it has to be at least as big as already received.
3. The scripts calculates an aspect ratio with this too small height.
4. It then uses too small height as absolute height and scales the width accordingly to very high numbers.
5. The image finishes loading, its original height increases and due to the fixed height and width set on it, its content gets scaled only on the y axis.

		function vertLife() {
		
			  var win_w = $(this).width();
			  var win_h = $(this).height();
			  var extra_h = $('.header').height() + $('.footer').height() + 40;
			  var article_height = win_h - extra_h;
			  var total_width = 0;
			  
			  $("#gallery img").each(function(){
				  $(this).addClass(this.width > this.height ? 'landscape' : 'portrait');
				  $(this).attr('data-ratio', this.width / this.height);
				  $(this).css({
				    height: Math.ceil(article_height),
				    width: article_height * $(this).attr('data-ratio'),
				  });
				  total_width = total_width + (article_height * $(this).attr('data-ratio'));
			  });
			  
			  var imPad = $("#gallery img").length * 5;
			  
			  $("#gallery").css({
			    height: Math.ceil(article_height),
				width: Math.ceil(total_width) + imPad + 20,
			  });
		
		}

From https://api.jquery.com/ready/
"In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead."

Comment 4

[Evan Langlois]

win_h is supposed to be the height of the window.  It comes up something insane the first time, but is correct the second.

You can blame the devel all you like, but Chrome has 80% market share, so people will test on Chrome and Safari and other browsers.   And when the site works on everything but Firefox, people will quite using Firefox.