ampproject / ampproject/amp.dev

Reduce number of layers in the sticky header

Open
#4,665 3 comments 1 reaction 1 assignee Claimed by @matthiasrohmer View on GitHub
Category: UX P1: High Type: Update
Dominant language
HTML
Stars
600
Forks
675
PR merge metrics
No merged PRs in 30d

Description

## 🐛 Bug Report

### Current behavior
The anchor tag wrapping AMP logo within the sticky header is also marked as sticky. This causes the browser to lay it out as a separate layer. Having too many layers can degrade performance and increase rendering time.

Please also provide:
- Page link: amp.dev
- (Optional) Screenshots/videos:
Screen Shot 2020-09-23 at 9 42 45 AM
Screen Shot 2020-09-23 at 9 42 51 AM

### Expected behavior/code
Position: sticky is not necessary as the element is within the sticky header, so it should be removed

### Reproduction procedure
Please provide the steps to reproduce the problem:

1. Visit amp.dev
2. Open rendering tab in CDT and click "layer borders"
3. remove position: sticky to see that the layer is removed and behavior is not impacted

- What browser are you using?
Chrome 87
- What O/S are you using?
OSX

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.