Skip to content

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

Merged
gmajoulet merged 4 commits intoampproject:masterfrom
gmajoulet:page_size_fix
Jan 24, 2020
Merged

Fix border around desktop amp-story-pages.#26449
gmajoulet merged 4 commits intoampproject:masterfrom
gmajoulet:page_size_fix

Conversation

@gmajoulet
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done

}

/** @override */
onMeasureChanged() {
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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.


/** @override */
onMeasureChanged() {
if (!this.isFirstPage_) {
Copy link
Copy Markdown
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