373642 - Page jumps around on load - missing width and height on images

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[John P Baker]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a3pre) Gecko/20070309 Minefield/3.0a3pre
Build Identifier: 

The preview images need their height and width specified to avoid disconcerting reflows as the images are loaded

Reproducible: Always

Steps to Reproduce:
1. Empty cache?
2. Go to https://preview.addons.mozilla.org/en-US/firefox/recommended
Actual Results:  
Page reflows as images are downloaded.

Expected Results:  
Image placeholders replaced by images.

Presumably they are all 200x150px.

This probably applies to all pages including preview images but image is often already cached when page is loaded.

Comment 1

[Wladimir Palant]

Confirming, the images don't have width/height set even though they all have the 200x150 format. Same goes for the previews page (see https://preview.addons.mozilla.org/en-US/firefox/addons/previews/1865).

Comment 2

[Mike Shaver (:shaver emeritus)]

I thought I fixed that many moons ago, but I apparently did not!

Comment 3

[Fred Wenzel [:wenzel]]

Actually, their size is not always 200x150px. Instead, this is the maximum dimension for the longer side and the other dimension will be scaled accordingly.

Any suggestions about how to fix this most nicely? One thing would be wrapping the images in a 200x150px div; another one (but possibly hard on the servers?) would be analyzing an image's size before generating the img tag.

Comment 4

[Wladimir Palant]

Heh, I thought images were filled up with transparency to make sure they are 200x150? It seems not any more... Then there is no option other than storing image size in the database (you know it anyway when the image is uploaded) and using it when generating the img tag.

Comment 5

[Michael Morgan [:morgamic]]

I would opt for using a div with min widths and min heights to surround the image if possible.  The jumping would be minimal in extreme cases.

Comment 6

[Michael Morgan [:morgamic]]

Will be fixing this, highlight images will have widths of 200x150, and icons are already limited.  See the finished front page for an example.