Skip to content

🚀 [Story performance] Use dvh if available, instead of vh #37003

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mszylkowski merged 5 commits into from
Nov 24, 2021
Merged

🚀 [Story performance] Use dvh if available, instead of vh #37003

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25d4e57
Use dvh if available, instead of vh
mszylkowski Nov 18, 2021
e938d74
Only add resize observer if doesnt support dvh
mszylkowski Nov 19, 2021
f5589a6
Remove px
mszylkowski Nov 19, 2021
8b837fe
using ?. on CSS
mszylkowski Nov 22, 2021
12defed
Merge branch 'main' of github.com:ampproject/amphtml into dvhVariable
mszylkowski Nov 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Only add resize observer if doesnt support dvh
  • Loading branch information
@mszylkowski
mszylkowski committed Nov 19, 2021
commit e938d741c5f04c1f9c94ba8cc1b7b662be082b0b
8 changes: 4 additions & 4 deletions extensions/amp-story/1.0/amp-story.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,25 +159,25 @@ amp-story[standalone].amp-notbuilt {
}

amp-story[standalone]:-webkit-full-screen {
height: var(--story-100dvh) !important;
height: 100vh !important;
Copy link
Copy Markdown
Contributor

@jridgewell jridgewell Nov 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't this using var(--story-100dvh)?

Copy link
Copy Markdown
Contributor Author

@mszylkowski mszylkowski Nov 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Full screen pages don't have any issues with vh since the browser appbar is not showing, it should be always the same 1dvh = 1vh.

max-height: none !important;
max-width: none !important;
}

amp-story[standalone]:-moz-full-screen {
height: var(--story-100dvh) !important;
height: 100vh !important;
max-height: none !important;
max-width: none !important;
}

amp-story[standalone]:-ms-fullscreen {
height: var(--story-100dvh) !important;
height: 100vh !important;
max-height: none !important;
max-width: none !important;
}

amp-story[standalone]:fullscreen {
height: var(--story-100dvh) !important;
height: 100vh !important;
max-height: none !important;
max-width: none !important;
}
Expand Down
4 changes: 3 additions & 1 deletion extensions/amp-story/1.0/amp-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,9 @@ export class AmpStory extends AMP.BaseElement {
// prerendering, because of a height incorrectly set to 0.
this.mutateElement(() => {});

this.onResize_(this.getViewport().getSize());
if (!this.win.CSS.supports || !this.win.CSS.supports('height', '100dvh')) {
Comment thread
mszylkowski marked this conversation as resolved.
Outdated
this.onResize_(this.getViewport().getSize());
}

const pageId = this.getInitialPageId_();
if (pageId) {
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story/1.0/pagination-buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
width: 30px !important;
top: 0 !important;
bottom: 0 !important;
height: calc(100vh - 150px) !important;
height: calc(var(--story-100dvh) - 150px) !important;
margin: auto 0 !important;
background: none !important;
transition: 150ms opacity linear, 150ms visibility linear !important;
Expand Down