food.ndtv.com - Overlapped items on the page

[sheikh-azharuddin]

URL: https://food.ndtv.com/food-drinks/lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off

Browser / Version: Chrome Mobile 93.0.4523
Operating System: Android 11
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
Items overlapped or not showing.. Works fine in vivaldi

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20210601094314
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-raul-bucata]

@sheikh-azharuddin We appreciate your report. I was not able to reproduce the issue. The page loads as expected, with no issues encountered:

Tested with:
Browser / Version: Chrome Mobile Version 91.0.4472.88
Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Suggestion: Try clearing cache/data/cookies, disable Ad-blocker (if available), or use a clean profile, and check again? If there are any changes made to the default settings of the browser please revert to the default settings and try again. Also, have the required cookies been accepted for this page?

[sheikh-azharuddin]

I have changed the user agent.. . actually i am getting the issue in Firefox Android browser... It works fine in chrome

[ksy36]

It seem that these parameters ?amp=1&akamai-rum=off are affecting it.

Visiting the link without ?amp=1, makes it work:
https://food.ndtv.com/news/pic-of-refrigerated-drawer-goes-viral-twitter-has-some-thoughts-2456382
I'll move this to needsdiagnosis

[karlcow]

With AMP=1
we get

Powered by AMP ⚡ HTML – Version 2106030132000 https://food.ndtv.com/food-drinks/lockdown-recipe-these-home…just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off

without

Powered by AMP ⚡ HTML – Version 2105281634000 https://food.ndtv.com/food-drinks/lockdown-recipe-these-home…taste-just-like-the-store-bought-ones-2450130?akamai-rum=off

It looks like two different versions of AMP are being run. It seems that ?amp=1 is there new way to do AMP.
ampproject/amp-wp#2204

Unfortunately there's nobody at @ndtv
The issue is also happening on desktop.
https://food.ndtv.com/food-drinks/lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off

12:28:50.090 Navigated to https://food.ndtv.com/food-drinks/lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off
12:28:50.296
Uncaught ReferenceError: googletag is not defined
    <anonymous> https://food.ndtv.com/food-drinks/lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off:10
lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130:10:17
12:28:51.488 Powered by AMP ⚡ HTML – Version 2106030132000 https://food.ndtv.com/food-drinks/lockdown-recipe-these-home…just-like-the-store-bought-ones-2450130?amp=1&akamai-rum=off amp.js:159:32
12:28:51.689
<amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller):  
<amp-iframe class="i-amphtml-element i-amph…l-built i-amphtml-error" width="340" height="434" sandbox="allow-scripts allow-same…opups-to-escape-sandbox" frameborder="0" src="https://drop.ndtv.com/co…tore-bought-ones-2450130" style="width: 340px; height: 434px;" i-amphtml-layout="fixed">
 Current position 145 . Min: 507.75 Positioning rules don't apply for iframes that use `placeholder`.See https://github.com/ampproject/amphtml/blob/main/extensions/amp-iframe/amp-iframe.md#iframe-with-placeholder for details.​​​ error-reporting.js:208:15
12:28:52.622 Invoking image pixel user sync for bidder: "appnexus" load-cookie.html:10:1060
12:28:52.624 Invoking Iframe pixel for bidder" + "pubmatic" load-cookie.html:10:1162
12:28:52.633 Invoking image pixel user sync for bidder: "rubicon" load-cookie.html:10:1060
12:28:52.904
Some cookies are misusing the “SameSite“ attribute, so it won’t work as expected 9
12:28:54.356 [amp-ad-network-doubleclick-impl] SRA is not compatible with lazy fetching, disabling SRA 3 log.js:255:7
12:28:54.618
Request to access cookie or storage on “<URL>” was blocked because it came from a tracker and content blocking is enabled. 23
12:28:56.728 Source map error: Error: request failed with status 404
Resource URL: blob:https://food.ndtv.com/5b485b1e-b521-d14c-9225-198863347ecd
Source Map URL: ww.js.map

12:28:56.735 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130
12:28:56.986 [amp-analytics/transport] Response unparseable or failed to send image request https://684fc53b.akstat.io/?h.d=food.ndtv.com&h.key=5B4J8-C4…es-2450130%3Famp%3D1%26akamai-rum%3Doff&r2=&scr.xy=3200x1800 log.js:255:7
12:29:01.697 The resource at “https://d-8637807722175681954.ampproject.net/2106030132000/frame.html” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130
12:29:01.697 The resource at “https://3p.ampproject.net/2106030132000/f.js” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130
12:29:06.660 The resource at “https://f134f41a021bc2e42dcb661f132686c3.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. lockdown-recipe-these-homemade-potato-chips-taste-just-like-the-store-bought-ones-2450130

​

The relevant message is probably

 <amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller):  
<amp-iframe class="i-amphtml-element i-amph…l-built i-amphtml-error" width="340" height="434" sandbox="allow-scripts allow-same…opups-to-escape-sandbox" frameborder="0" src="https://drop.ndtv.com/co…tore-bought-ones-2450130" style="width: 340px; height: 434px;" i-amphtml-layout="fixed"> Current position 145 . Min: 600 Positioning rules don't apply for iframes that use `placeholder`.See https://github.com/ampproject/amphtml/blob/main/extensions/amp-iframe/amp-iframe.md#iframe-with-placeholder for details.​​​

<amp-iframe title="User Sync" width="1" height="1" sandbox="allow-same-origin allow-scripts" frameborder="0" src="https://ads.pubmatic.com/AdServer/js/pwtSync/load-cookie.html?pubid=158451&amp;profid=1600&amp;bidders=appnexus,pubmatic,rubicon" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" style="width: 1px; height: 1px;" i-amphtml-layout="fixed" amp-removed="">
  <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder="" class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout amp-hidden" i-amphtml-layout="fill" i-amphtml-auto-lightbox-visited=""><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
  <i-amphtml-scroll-container class="amp-active"></i-amphtml-scroll-container>
</amp-iframe>

If I set a width: 100% on the element, the content is being displayed.

<div class="stk_wrp vjl-row s-lmr js-pro_in d-flex" style="width: 100%;">

[webcompat-bot]

Generate outreach template

[sheikh-azharuddin]

But the same url works fine in chrome

[karlcow]

@sheikh-azharuddin yes It's why I moved to needscontact. We need to find someone working at ndtv so they can fix the issue. I'm pretty sure it's partly user agent sniffing.

[reinhart1010]

There is a contact form and an email address at https://www.ndtv.com/convergence/ndtv/new/feedback.aspx

[reinhart1010]

Tried to submit the contact form and an error occured: https://www.ndtv.com/error?aspxerrorpath=/convergence/ndtv/new/feedback.aspx

[reinhart1010]

Sent an email instead to [email protected]. Moving to sitewait.

[karlcow]

The issue still exists.

[karlcow]

It would probably be useful if we could create a sitepatch to remove the AMP of the url and reload. To think

[softvision-oana-arbuzov]

The issue seems to be fixed, I get the correct layout both on Firefox and Chrome.

Tested with:
Browser / Version: Firefox Nightly 102.0a1 (🦎 102.0a1-20220517092745), Chrome 101.0.4951.61
Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

@sheikh-azharuddin can you still reproduce it?

[inv_20/2022]

[sheikh-azharuddin]

Yes issue is fixed