New issue
Advanced search Search tips

Issue 687317 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 2
Type: Bug



Sign in to add a comment

AMP search results with position:static render incorrectly due to Location bar

Reported by si...@guidetoiceland.is, Jan 31 2017

Issue description

Example URL:
https://www.google.is/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=sn%C3%A6fellsnes&oq=sn%C3%A6fe&aqs=chrome.0.69i59j69i57j69i61j0l2j69i61.878j0j7

Steps to reproduce the problem:
1. Go to a Google search result with AMP pages that have {position:static; top:0;} CSS
2. Scroll down to the AMP result, making sure the location bar is not showing
3. Click on the AMP search result and notice the header navigation (top:0) disappear

What is the expected behavior?
The AMP element should not be hidden behind the URL bar and Google Search AMP cache header.

What went wrong?
The AMP header hid behind the Google Search AMP cache header.

If I scroll down and up again (making the URL bar appear) before I click on an AMP search result, the render is perfect.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 55.0.2883.79  Channel: stable
OS Version: 10
Flash Version: 

I am able to reproduce this on Chrome stable on iPhone 4 (iOS 9) and iPhone 7 (iOS 10).
I am able to reproduce this on Chrome beta on iPhone 4 (iOS 9).

Here is a video where I reproduce the bug on iPhone 7: https://www.youtube.com/watch?v=s7Rl_p8cYUc

I reproduce where it works properly and where it doesn't work properly.

(Sorry for the choppy audio)

 
I don't think the images were attached in the bug report .. attaching again.
iphone-amp-correct.png
124 KB View Download
IMG_0719.PNG
214 KB View Download
IMG_0719.PNG is a screenshot from one of the iphones I have on hand.
iphone-amp-correct.png is a screenshot from my browser - this is how the page is supposed to look.

Comment 3 by bokan@chromium.org, Feb 1 2017

Cc: bokan@chromium.org dvoytenko@google.com
Components: -Blink Blink>Scroll
This isn't a Blink bug since it's on iOS but I'll leave it under scroll since that deals with URL bar issues.

+dvoytenko@, do you know about this?
Cc: pkl@chromium.org
Components: -Blink>Scroll
Removing Blink>Scroll so this will get triaged by the iOS team. Adding pkl@

Comment 5 by pkl@chromium.org, Feb 1 2017

Cc: michaeldo@chromium.org
Possibly related to fullscreen?
Cc: justincohen@chromium.org
Owner: michaeldo@chromium.org
Status: Assigned (was: Unconfirmed)
michaeldo@ can you confirm if this is something we can fix?
This is clearly an AMP bug. We'll see what we can do soon. It's tracked here: https://github.com/ampproject/amphtml/issues/6073

The bottom-line, position:sticky support is lagging.
This issue can probably be closed in the preference to https://github.com/ampproject/amphtml/issues/6073
Status: ExternalDependency (was: Assigned)
Flipping to ExternalDependency.  Thanks!
Owner: dvoytenko@google.com
dvoytenko@ this is an issue with position:static - not position:sticky.
Unless those two are the same in Webkit, I would think those are two separate issues.
- but then again, I'm not too familiar with Chromium internals.
Status: Fixed (was: ExternalDependency)
This has been fixed in AMP Canary.

Comment 13 Deleted

@dvoytenko@google.com do you know if this this version of Canary has been moved to stable?

This is still happening in iOS Chrome.
Owner: michaeldo@chromium.org
Status: Assigned (was: Fixed)
I'm reopening this. It was mistakenly attributed to position:sticky. In fact this is unrelated. I apologize for confusion. It looks like the bug with iOS Chrome. It looks like the content is offset by exactly the size of the address bar in iOS Chrome. This thread explains it in a great detail: https://github.com/ampproject/amphtml/issues/7283#issuecomment-309031995

Comment 16 by pkl@chromium.org, Aug 7 2017

Components: UI>Browser>FullScreen
Mike, any updates here?

Sign in to add a comment