Amphtml: amp-sidebar doesnt work as expected on AMP CDN

[renzit]

Description

amp-sidebar doesn't work as expected when content is served from the google cdn on a real mobile device.

How do we reproduce the issue?

This test was using a Nexus 5 phone, also tested on Samsung phones.
Follow this steps to reproduce this:
1- On your mobile device search in google chrome for amp example and open the link with the thunder that indicates its hosted on AMP CDN.
(Can find the bug on the cdn amp of another searchs like:
"amp site:vix.com"
"amp site:thenextweb.com"
"amp site:irishtimes.com")

In any of this examples is implemented the amp-sidebar tag. But isnt working as expected, when user click on the with the toggle class is like the transition is broken or maybe is made, but the touch of the device is a lot sensitive so it open and close in milisecond and the user isnt able to interact with the menu and causes a bad UX on a commonly used component.

The interesting is that the amp-sidebar works when using the device emulator on the dev tools of chrome desktop. Also works if u go directly to the server and no to the CDN of Google.

Here is a video of the bug.
https://drive.google.com/open?id=0B_Y1gCdy9bBldWxWSnVuaWgtUjFFODE1STZ4NXlTMHpGbXVR

What browsers are affected?

Browser: Chrome Version 56.0.2924.87
On nexux 5 phone and other devices.

[NataliaLKB]

We have seen this bug as well for all Guardian pages

[choumx]

/to @camelburrito /cc @aghassemi

[ericlindley-g]

I can repro on Android (not on iOS) — /cc @aghassemi @muxin @camelburrito , do you have any ideas?

Slotting at P0 for now, but may change based on how widespread this is

[honeybadgerdontcare]

When directly going to the AMP Cache, I couldn't reproduce this on a test site, but I do see it on cdn.ampproject.org/c/s/ampbyexample.com. On a sidebar click, it shows the following in console:

Action Error: target not found in [tap:drawermenu.toggle]
Dd @ error.js:128
f.assert @ log.js:301
sg @ action-impl.js:292
f.trigger @ action-impl.js:277
(anonymous) @ action-impl.js:152

Uncaught Error: Action Error: target not found in [tap:drawermenu.toggle]​​​ _reported_
    at na.f.assert (log.js:295)
    at sg (action-impl.js:292)
    at ig.f.trigger (action-impl.js:277)
    at HTMLDocument.<anonymous> (action-impl.js:152)

I'm also seeing a different UI for ampbyexample when going directly to the cdn instead of search, not sure if that's a different issue or related.

[camelburrito]

We have not touched sidebar in a while . Could this be the scroll fix that @muxin did ? Or did actions code have any changes recently ?

[amphtml-team]

I can repro 8/10 on iOS Chrome but only 1/10 on iOS Safari.
On Mon, Mar 27, 2017 at 1:07 PM Sriram Krishnan [e-mail]
wrote:

We have not touched sidebar in a while . Could this be the scroll fix that
@muxin https://github.com/muxin did ? Or did actions code have any
changes recently ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amphtml/issues/8399#issuecomment-289518513,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANd2kLHitZSOMEk0083dT7Aw-jJ5blYlks5rp-zYgaJpZM4MpAeD
.

--
You received this message because you are subscribed to the Google Groups
"amphtml-eng-github" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/a/google.com/d/msgid/amphtml-eng-github/ampproject/amphtml/issues/8399/289518513%40github.com
https://groups.google.com/a/google.com/d/msgid/amphtml-eng-github/ampproject/amphtml/issues/8399/289518513%40github.com?utm_medium=email&utm_source=footer
.

--
You received this message because you are subscribed to the Google Groups
"amphtml-eng" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/a/google.com/d/msgid/amphtml-eng/ampproject/amphtml/issues/8399/289518513%40github.com
https://groups.google.com/a/google.com/d/msgid/amphtml-eng/ampproject/amphtml/issues/8399/289518513%40github.com?utm_medium=email&utm_source=footer
.

[aghassemi]

Likely related to use of History API. A few other Sidebar bugs seem to be also related to using history for close/open push: #6512 , #7044. @ericlindley-g and I chatted about this a bit, given that pushing to history is not a common UX pattern for sidebar open/close ( e.g PWA App Shells don't do it) and is causing multiple issues, we may just get rid of it.

[aghassemi]

@ericlindley-g : Update: It is a viewer regression, @muxin and the viewer team are looking into it.

[muxin]

b/36654490 is the tracking bug in viewer, both sidebar and lightbox is experiencing the same issue due to history bug.

[cramforce]

Fix on Google's side is in progress.

[aghassemi]

The fix is in production and the issue has been resolved. Sorry for the inconvenience.

[NataliaLKB]

Thank you all for finding and fixing this bug!

[renzit]

Same as NataliaLKB , thank you for the quick fix 👍

I check and everithing is ok , even the bug of the scroll on the sidebar is fixed, all of you rock 🎸