Skip to content
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.

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

Fix border around desktop amp-story-pages. #26449

Merged
merged 4 commits into from Jan 24, 2020

Conversation

gmajoulet
Copy link
Contributor

  • Moves the code that sets the --story-page--* CSS variables to amp-story-page
  • Leverages the onMeasureChanged() runtime method to know when the amp-story-page actually gets resized
  • Only measures from the first story page, that always gets built because of the prerendering optimizations we have (even with branching)
  • onMeasureChanged() is called after buildCallback but before layoutCallback, so the story can't be marked as rendered before the CSS variables are set, as it waits for the first page to be fully loaded. Also works perfectly with prerendering (no jump)
  • Fixes a bug where the previous code would sometimes measure the page on viewport resize before the page is actually resized
  • Provides a rounded value to use for the translate and remove the unwanted border around amp-story-page elements on desktop

Demo

Fixes #16626

'style',
`--story-page-vh: ${px(state.vh)};` +
`--story-page-vw: ${px(state.vw)};` +
`--story-page-50vw: ${px(state.fiftyVw)};` +
Copy link
Contributor

Choose a reason for hiding this comment

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

I know it will be asymmetric with the other ones, but can we make this --i-amphtml-story-page-50vw, since this is internal-facing for a very specific purpose?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

@@ -497,6 +494,46 @@ export class AmpStoryPage extends AMP.BaseElement {
]);
}

/** @override */
onMeasureChanged() {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you know to what extent calls to this method are throttled/debounced?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I couldn't find an obvious answer reading the code, maybe @jridgewell would know?

Copy link
Contributor

Choose a reason for hiding this comment

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

They're not. It's called every time Resources measures it, and the measurements are different than the last time.

@@ -497,6 +494,46 @@ export class AmpStoryPage extends AMP.BaseElement {
]);
}

/** @override */
onMeasureChanged() {
if (!this.isFirstPage_) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you add a comment here with what you wrote on your description?

"Only measures from the first story page, that always gets built because of the prerendering optimizations we have (even with branching)"

@gmajoulet gmajoulet merged commit 666ed40 into ampproject:master Jan 24, 2020
@gmajoulet gmajoulet deleted the page_size_fix branch January 24, 2020 21:12
robinvanopstal added a commit to jungvonmatt/amphtml that referenced this pull request Jan 27, 2020
* master: (62 commits)
  📦 Update dependency fetch-mock to v8.3.2 (ampproject#26491)
  Revert 'Move mutator implementations out to a standalone service' (ampproject#26479)
  Fix syntax error (ampproject#26481)
  Add pespective back. (ampproject#26486)
  More user friendly errors in layout.js (ampproject#26448)
  ✨ Start logging AMP URL on SwG Pages (ampproject#26480)
  Fix border around desktop amp-story-pages. (ampproject#26449)
  Fix Story tests. (ampproject#26464)
  ✨ Performance Measurement Chrome Extension (ampproject#26333)
  amp-consent restrict iframe fullScreen if no focus  (ampproject#26461)
  Add performance benchmark task (ampproject#26026)
  ♻️ amp-script: emit warning if zero height and width. (ampproject#26444)
  ✨ Launch minimal-wrapper native CEv1 (ampproject#26360)
  ♻️ Lint: include externs (round 2) (ampproject#26446)
  amp-script: Create 'fill content' container for responsive/fluid (ampproject#26400)
  amp-consent remove cmp iframe focus (ampproject#26437)
  Disable macro-after-long-task in inabox. (ampproject#26459)
  Launch layoutbox-invalidate-on-scroll (ampproject#26430)
  Add amp-ad support for ByPlay (ampproject#25663)
  🏗 Add specific RTV opt-in to experiments.html (ampproject#26434)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unwanted border around amp-story-page in desktop view
6 participants