ampproject / ampproject/amphtml

scroll-padding and scroll-margin won't work in AMP page

Open
#34,378 3 comments 3 reactions 1 assignee Claimed by @alanorozco View on GitHub
P1: High Priority Stale Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

The CSS property scroll-padding and scroll-margin won't work, when used on AMP page.

## How do we reproduce the issue?

[Try the example on the playground](https://playground.amp.dev/#share=PCFET0NUWVBFIGh0bWw+CjxodG1sIOKaoT4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgPHRpdGxlPk15IEFNUCBQYWdlPC90aXRsZT4KICA8bGluayByZWw9ImNhbm9uaWNhbCIgaHJlZj0iYW1wcy5odG1sIiAvPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsbWluaW11bS1zY2FsZT0xLGluaXRpYWwtc2NhbGU9MSIgLz4KICA8c3R5bGUgYW1wLWN1c3RvbT4KICAgICAgKiB7CiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAgICAgfQoKICAgICAgaHRtbCxib2R5IHsKICAgICAgICBzY3JvbGwtcGFkZGluZy10b3A6IDY2cHg7CiAgICAgIH0KCiAgICAgIC5oZWFkZXIgewogICAgICAgIHBvc2l0aW9uOiBzdGlja3k7CiAgICAgICAgcGFkZGluZzogMjBweDsKICAgICAgICB0b3A6IDA7CiAgICAgICAgbGVmdDogMDsKICAgICAgICBoZWlnaHQ6IDY2cHg7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzk5ZjZmZjsKICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICB6LWluZGV4OiAyOwogICAgICB9CgogICAgICAubGluayB7CiAgICAgICAgY29sb3I6IHJlZDsKICAgICAgfQoKICAgICAgLmNvbnRlbnQgewogICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgfQoKICAgICAgLmNvbnRlbnQgPiBoMiB7CiAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgIHRvcDogLTEwcHg7CiAgICAgICAgbGVmdDogMTBweDsKICAgICAgICBjb2xvcjogd2hpdGU7CiAgICAgICAgei1pbmRleDogMTsKICAgICAgfQoKICAgIDwvc3R5bGU+CiAgPHN0eWxlIGFtcC1ib2lsZXJwbGF0ZT5ib2R5ey13ZWJraXQtYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1vei1hbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aDstbXMtYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7YW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGh9QC13ZWJraXQta2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUAtbW96LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1zLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW8ta2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUBrZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19PC9zdHlsZT48bm9zY3JpcHQ+PHN0eWxlIGFtcC1ib2lsZXJwbGF0ZT5ib2R5ey13ZWJraXQtYW5pbWF0aW9uOm5vbmU7LW1vei1hbmltYXRpb246bm9uZTstbXMtYW5pbWF0aW9uOm5vbmU7YW5pbWF0aW9uOm5vbmV9PC9zdHlsZT48L25vc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC5qcyI+PC9zY3JpcHQ+CjwvaGVhZD4KPGJvZHk+CiAgPGhlYWRlciBjbGFzcz0iaGVhZGVyIj4KICAgIEhlYWRlcgogIDwvaGVhZGVyPgogIDxoMT4KICAgIEFNUCBwYWdlCiAgPC9oMT4KICA8cD48YSBjbGFzcz0ibGluayIgaHJlZj0iI3RhcmdldCI+SnVtcCB0byBDb250ZW50IDQ8L2E+PC9wPgogIDxkaXYgY2xhc3M9ImNvbnRlbnQiPgogICAgPGgyPkNvbnRlbnQxPC9oMj4KICAgIDxhbXAtaW1nIGxheW91dD0icmVzcG9uc2l2ZSIgd2lkdGg9IjQ1MCIgaGVpZ2h0PSIzMDAiIHNyYz0iaHR0cDovL3BsYWNla2l0dGVuLmNvbS80NTAvMzAwP2ltYWdlPTEwIiAvPgogIDwvZGl2PgogIDxkaXYgY2xhc3M9ImNvbnRlbnQiPgogICAgPGgyPkNvbnRlbnQyPC9oMj4KICAgIDxhbXAtaW1nIGxheW91dD0icmVzcG9uc2l2ZSIgd2lkdGg9IjQ1MCIgaGVpZ2h0PSIzMDAiIHNyYz0iaHR0cDovL3BsYWNla2l0dGVuLmNvbS80NTAvMzAwP2ltYWdlPTExIj48L2FtcC1pbWc+CiAgPC9kaXY+CiAgPGRpdiBjbGFzcz0iY29udGVudCI+CiAgICA8aDI+Q29udGVudDM8L2gyPgogICAgPGFtcC1pbWcgbGF5b3V0PSJyZXNwb25zaXZlIiB3aWR0aD0iNDUwIiBoZWlnaHQ9IjMwMCIgc3JjPSJodHRwOi8vcGxhY2VraXR0ZW4uY29tLzQ1MC8zMDA/aW1hZ2U9MTIiPjwvYW1wLWltZz4KICA8L2Rpdj4KICA8ZGl2IGlkPSJ0YXJnZXQiIGNsYXNzPSJjb250ZW50Ij4KICAgIDxoMj5Db250ZW50NDwvaDI+CiAgICA8YW1wLWltZyBsYXlvdXQ9InJlc3BvbnNpdmUiIHdpZHRoPSI0NTAiIGhlaWdodD0iMzAwIiBzcmM9Imh0dHA6Ly9wbGFjZWtpdHRlbi5jb20vNDUwLzMwMD9pbWFnZT0xMyI+PC9hbXAtaW1nPgogIDwvZGl2PgogIDxkaXYgY2xhc3M9ImNvbnRlbnQiPgogICAgPGgyPkNvbnRlbnQ1PC9oMj4KICAgIDxhbXAtaW1nIGxheW91dD0icmVzcG9uc2l2ZSIgd2lkdGg9IjQ1MCIgaGVpZ2h0PSIzMDAiIHNyYz0iaHR0cDovL3BsYWNla2l0dGVuLmNvbS80NTAvMzAwP2ltYWdlPTE0Ij48L2FtcC1pbWc+CiAgPC9kaXY+CiAgPGRpdiBjbGFzcz0iY29udGVudCI+CiAgICA8aDI+Q29udGVudDY8L2gyPgogICAgPGFtcC1pbWcgbGF5b3V0PSJyZXNwb25zaXZlIiB3aWR0aD0iNDUwIiBoZWlnaHQ9IjMwMCIgc3JjPSJodHRwOi8vcGxhY2VraXR0ZW4uY29tLzQ1MC8zMDA/aW1hZ2U9MTUiPjwvYW1wLWltZz4KICA8L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+).
1. Here we have a fixed header with a scroll-paddin-top equal to its own height.
2. Click "Jump to Content 4".
3. The fixed header will obscure the top of a element that you're trying jump to.

On non-amp pages, [it works as expected.](https://codepen.io/otsuky/pen/zYZqrjj)

## What browsers are affected?
I've tried on
- Chrome for PC (ver.90.0.4430.93)
- Chrome for mobile (88.0.4324.152 with android 10)

## Which AMP version is affected?

- Version 2104302228000

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.