ampproject / ampproject/amphtml

amp-img does not apply class on load when [class] amp binding is defined under mustache template

Open
#33,400 2 comments 0 reactions 0 assignees View on GitHub
Stale
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

`amp-img` does not apply `class` on load when `[class]` amp binding is defined under `mustache` template

Briefly describe the bug/feature request.

When `class` is defined for the `amp-img` and `[class]` binding is defined, only the `[class]` binding takes effect but not the `class` values on the page load. Also observed if no `[class]` binding is defined the `class` values take effect. In the attached example (given instructions on how to run on mac local using python 3), the class values defined in the `amp-img` ie: `mtop10` and `mtop10 none` do not take effect. However when the buttons are clicked the bound values of `[class]` work as desired.

## How do we reproduce the issue?

```
> download attached zip file on mac - amp-gbug.zip. # attached in the bug (pls. search)
> unzip amp-gbug.zip
> # Follow README.md
```

Also added here for reference

Reproducing steps for bug

### Setup

```
> virtualenv -p python3 amp_env
> source amp_env/bin/activate
> pip3 install -U flask-cors requests
```

### Run

```
> export FLASK_APP=bug.app
> export FLASK_ENV=development
> flask run
```

### Test

Using Browser go to http://127.0.0.1:5000/static/html/bug.html

### Bug Description

You will see following UI on page load (2 images) should be just first image ONLY (as the `class` values have not taken effect).

#### Page Load

![image](https://user-images.githubusercontent.com/343993/111861139-5349f980-8909-11eb-99a2-53ac2f64625f.png)

Once you click the buttons the code works as expected

#### Click First Button

![image](https://user-images.githubusercontent.com/343993/111861147-652b9c80-8909-11eb-9160-2739eae31805.png)

#### Click Second Button

![image](https://user-images.githubusercontent.com/343993/111861160-74124f00-8909-11eb-9a77-3e6c9267f3d4.png)
[](url)

### Tips on Rendering Bugs

Refer attached ZIP file and instructions

## What browsers are affected?

All browsers
Mac

My Chrome Version - Version 89.0.4389.90 (Official Build) (x86_64)
My Safari Version - Version 14.0.3 (15610.4.3.1.7, 15610)

## Which AMP version is affected?

Not sure if it was always broken for mustache
AMP version

```






```

Attached ZIP file:
[amp-gbug.zip](https://github.com/ampproject/amphtml/files/6174996/amp-gbug.zip)

Contributor guide

Open the contributing guide

Research direction

Start with the attached ZIP's README and static/html/bug.html, then reproduce the initial page-load behavior using the listed AMP scripts and local Flask setup. Trace how amp-img combines its static class with the [class] binding inside the mustache template. Done means the initial static classes apply on load while subsequent bound class changes still work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.