ampproject / ampproject/amphtml

Carousel does not support image media attributes/queries

Open
#30,719 1 comment 0 reactions 1 assignee Claimed by @micajuine-ho View on GitHub
Component: amp-carousel P2: Soon Stale Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

When using `` and using a slide with two images, designated by media queries `` , the image that does not satisfy the original media query never renders.

Once the screen is resized, the second image should show, however, it never does.

**Simple example [here](https://playground.amp.dev/?mode=Responsive#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoT4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogIDx0aXRsZT5NeSBBTVAgUGFnZTwvdGl0bGU+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9InNlbGYuaHRtbCIgLz4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLG1pbmltdW0tc2NhbGU9MSxpbml0aWFsLXNjYWxlPTEiPgogIDxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tb3otYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1zLWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoO2FuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RofUAtd2Via2l0LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1vei1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tcy1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1vLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1Aa2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fTwvc3R5bGU+PG5vc2NyaXB0PjxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjpub25lOy1tb3otYW5pbWF0aW9uOm5vbmU7LW1zLWFuaW1hdGlvbjpub25lO2FuaW1hdGlvbjpub25lfTwvc3R5bGU+PC9ub3NjcmlwdD4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1jYXJvdXNlbCIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtY2Fyb3VzZWwtMC4yLmpzIj48L3NjcmlwdD4KICA8c3R5bGUgYW1wLWN1c3RvbT4KICAgIGgxIHsKICAgICAgbWFyZ2luOiAxcmVtOwogICAgfQogIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPGFtcC1jYXJvdXNlbCBjb250cm9scyB3aWR0aD0iNDUwIiBoZWlnaHQ9IjMwMCIgbGF5b3V0PSJyZXNwb25zaXZlIiB0eXBlPSJzbGlkZXMiIHJvbGU9InJlZ2lvbiIgYXJpYS1sYWJlbD0iQmFzaWMgY2Fyb3VzZWwiPgogICAgPGRpdiBpZD0ic2xpZGUtMSI+CiAgICAgIDwhLS0gZmlyc3Qgc2hvdWxkIHNob3cgb24gbW9iaWxlLCBzZWNvbmQgaW1hZ2Ugc2hvdWxkIHNob3cgb24gZGVza3RvcCAtLT4KICAgICAgPGFtcC1pbWcgaWQ9Im1vYmlsZS1pbWFnZSIgbWVkaWE9IihtYXgtd2lkdGg6NjQ5cHgpIiBzcmM9Ii9zdGF0aWMvaW5saW5lLWV4YW1wbGVzL2ltYWdlcy9pbWFnZTIuanBnIiBsYXlvdXQ9ImZpbGwiPjwvYW1wLWltZz4KICAgICAgPGFtcC1pbWcgaWQ9ImRlc2t0b3AtaW1hZ2UiIG1lZGlhPSIobWluLXdpZHRoOjY1MHB4KSIgc3JjPSIvc3RhdGljL2lubGluZS1leGFtcGxlcy9pbWFnZXMvaW1hZ2UxLmpwZyIgbGF5b3V0PSJmaWxsIj48L2FtcC1pbWc+CiAgICAgIDwhLS0gaG93ZXZlciwgb25seSB0aGUgZmlyc3QgaW1hZ2UgaXMgZXZlciBsb2FkZWQsIGJhc2VkIG9uIHRoZSBzaXplIG9mIHRoZSBzY3JlZW4gZHVyaW5nIGxvYWQuICBUaGUgc2Vjb25kIHNpemUgb2YgdGhlIGltYWdlIGlzIG5ldmVyIGxvYWRlZCAtLT4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0ic2xpZGUtMiI+CiAgICAgIDxhbXAtaW1nIHNyYz0iL3N0YXRpYy9pbmxpbmUtZXhhbXBsZXMvaW1hZ2VzL2ltYWdlMy5qcGciIGxheW91dD0iZmlsbCI+PC9hbXAtaW1nPgogICAgPC9kaXY+CiAgPC9hbXAtY2Fyb3VzZWw+CjwvYm9keT4KPC9odG1sPg==).**

Additionally, trying to use a srcset does not work, only the original src value takes over.

This would seem like a big issue considering people often use different images of different dimensions on mobile.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.