coil-kt/coil

Placeholder affects image scaling when we use CrossfadeTransition and the placeholder image is larger

Open

#1688 opened on Mar 26, 2023

View on GitHub
 (3 comments) (3 reactions) (0 assignees)Kotlin (11,779 stars) (757 forks)batch import
help wanted

Description

Describe the bug When I have CrossfadeTransition.Factory() passed to the ImageLoader, I get a different final scale in an AsyncImage if it uses a placeholder that is larger than the final image. Everything is fine if I remove the crossfade, remove the placeholder, or use a placeholder that matches the size of the final image.

To Reproduce Minimum reprodicible example here: https://github.com/tfcporciuncula/coil-crossfade

You can clone the repo, run the code, and observe that:

  • If we keep CrossfadeTransition.Factory() around, we'll get different scaling results depending on whether we keep or remove the placeholder.
  • If we remove CrossfadeTransition.Factory(), the scaling is the same regardless if we have the placeholder or not.
  • If we keep CrossfadeTransition.Factory() but change the placeholder from R.drawable.placeholder_larger to R.drawable.placeholder, which has the exact same size as our final imagem, then everything is fine.

Logs/Screenshots

Image on the left is what we get with crossfade and the large placeholder. Image on the right is the correct scaling which we get by either removing the crossfade, removing the placeholder, or using a placeholder that matches the final image size.

1 2

We're using ContentScale.Crop above, but we can move to ContentScale.Fit to make the difference more visible:

w c

Version Coil 2.3.0, reproduced on a Pixel 4 running Android 13 and on a Pixel 6 emulator (1080x2400 420dpi) running Android 10 (screenshots from the latter).

Contributor guide

Tech stack
kotlinandroid
Domain
mobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of CoilAndroid/Compose development
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate how CrossfadeTransition.Factory interacts with placeholder dimensions in AsyncImage. The bug report indicates that placeholder size affects final scale when crossfade is used. Examine the Transition class and how size is determined during transitions. Look at the provided minimal reproduction repository (github.com/tfcporciuncola/coil crossfade) to isolate the issue. The maintainers may need to adjust size handling in crossfade transitions.