amp-carousel issues with flex-layout #14239
Description
What's the issue?
issue A.
amp-carousel type="slides" does not scroll out of view on iOS, except when grabbed from controls or when zoomed in. Page scrolling is affected. In this use case the carousel sits at the top of the page and the issue makes the rest of the page unreachable, except if you figure it out and grab from either the right or left arrow control and scroll the page from there. Page scrolling is also possible by grabbing the thumbnail carousel of type="carousel" below the main carousel of type="slides". The only element with z-index is the page header. Hence stacking should not cause this behavior.
issue B. (possibly related)
When scrolling down the images imported using amp-img are often times not loaded. Sometimes tapping on them forces them to load (possibly through focus event?), but sometimes they still won't load. Perhaps this is a scroll position related issue. Hence mentioning it in this context might help in investigating. amp-imgs and amp-youtube inside the carousel always load when the carousel is positioned at the top of the page.
Additional comments: when amp-carousel or amp-youtube with autoplay is at the top of the page, they load as expected and autoplay works. However, if they are positioned outside of first view, autoplay exhibits same behavior as the amp-imgs outside of view: sometimes not starting and/or loading. This is not reproducible with the currently available page as the carousel containing the youtube video is at the top of the page, but could be easily reproduced by placing some placeholder content before the carousel and make it render out of first view. This further supports the assumption of scroll/view position parameters being at the root of these issues.
How do we reproduce the issue?
issue A.
- Go to: https://tulipiippu.com/bioSydan-54-kWh/ (or similar product page in that domain)
- scroll down the page using a non-iOS device
- repeat with an iOS device or Xcode simulator for iOS to confirm
issue B.
Load the page and reload it a few times if the amp-imgs are showing. The issue should manifest itself with any browser/device in a few (typically less than five) page loads. Tap on the empty image position where it says "NAPAUTA" if you see one, to observe the forced load behavior (not always taking place).
What browsers are affected?
issue A.
Issue observed with iOS Safari on iPad and Xcode iOS 11.2 simulator for all device types. Other browsers on iOS not tested, but possibly affected as well. Issue confirmed to not exist with Safari on MacOS, Chrome, Edge, Android browser etc.
issue B.
All browsers and devices.
Which AMP version is affected?
1521658019509