Page MenuHomePhabricator

Remove magic number timeout if possible when lazy loading images
Closed, ResolvedPublic

Description

In https://gerrit.wikimedia.org/r/#/c/268185/ in Skin.js there is a setTimeout with 100 ms, that is because using requestAnimationFrame or setTimeout with a small delay (0, 10, etc) won't always trigger the CSS transition that fades the image in.

In chrome it is more blatant than in firefox for example, meaning that the transition won't get triggered with a small delay or raf.

Why is this happening? How do we get rid of the 100ms magic number? How do we reliably trigger the CSS transition when we want to?

Event Timeline

Jhernandez raised the priority of this task from to Needs Triage.
Jhernandez updated the task description. (Show Details)
Jhernandez added a project: MobileFrontend.
Jhernandez added a subscriber: Aklapper.

Change 269985 had a related patch set uploaded (by Phuedx):
Replace transition with animation

https://gerrit.wikimedia.org/r/269985

Jdlrobson triaged this task as Medium priority.Feb 11 2016, 4:55 PM
Jdlrobson added a subscriber: Jdlrobson.

Change 269985 merged by jenkins-bot:
Replace transition with animation

https://gerrit.wikimedia.org/r/269985

Change 270259 had a related patch set uploaded (by Phuedx):
Also fade out image container when image loads

https://gerrit.wikimedia.org/r/270259

phuedx claimed this task.
phuedx added a subscriber: phuedx.

This was fixed by 269985.

Change 270259 merged by jenkins-bot:
Also fade out image container when image loads

https://gerrit.wikimedia.org/r/270259