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

🖍🚀 Alternate position: fixed/absolute when docking/undocking #32243

Merged
merged 16 commits into from
Jan 28, 2021

Conversation

alanorozco
Copy link
Member

@alanorozco alanorozco commented Jan 27, 2021

  • 🖍 Previously the video element would lag behind when using position: fixed at undock. position: absolute follows the video as it scrolls, eliminating the lag. (This was backported from Bento version.)

  • 🚀 Use existing clientRect where possible to prevent getBoundingClientRect() calls.

  • 🚀 Migrates to IntersectionObserver.


Before / after (at 0.75 speed)

dock-fixed-absolute.mp4

(Tip: right click > Loop)

Copy link
Member

@samouri samouri left a comment

Choose a reason for hiding this comment

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

Thank you for including the before/after videos!

extensions/amp-video-docking/0.1/amp-video-docking.js Outdated Show resolved Hide resolved

// If the component's box is way out of view, the runtime might have
// discarded its size values.
if (!isSizedRect(inlineRect)) {
Copy link
Member

Choose a reason for hiding this comment

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

FYI, you can now use ResizeObserver. Dima created a really nice helper

/**
* @param {!Element} element
* @param {!ContentSizeObserverCallbackDef} callback
*/
export function observeContentSize(element, callback) {

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks, I'll give that a try later. We might not need this check after all now since all rects come directly from browser.

@alanorozco alanorozco merged commit 6653828 into ampproject:master Jan 28, 2021
@alanorozco alanorozco deleted the dock-fixed-absolute branch January 28, 2021 23:13
zaparent pushed a commit to zaparent/amphtml that referenced this pull request Jan 29, 2021
…oject#32243)

- 🖍   Previously the video element would lag behind when using `position: fixed` at undock. `position: absolute` follows the video as it scrolls, eliminating the lag.  (This was backported from Bento version.)

- 🚀  Use existing `clientRect` where possible to prevent `getBoundingClientRect()` calls.

- 🚀  Migrates to `IntersectionObserver`.

Before / after (at 0.75 speed)
https://user-images.githubusercontent.com/254946/106031359-0756a300-6084-11eb-8bab-7cbe1f769313.mp4
westonruter added a commit to westonruter/amphtml that referenced this pull request Jan 29, 2021
* 'master' of github.com:ampproject/amphtml: (1020 commits)
  🏗 Clean up CI config files (ampproject#32303)
  🏗 Remove Browser Installation from CI tasks and use smaller instances when possible (ampproject#32310)
  Cleanup fie-resources experiment (ampproject#32226)
  🏗  Fix bug in build target discovery logic (ampproject#32307)
  📖 Update TOC on TESTING.md (ampproject#32304)
  🏗 Reorganize browserify caching code (ampproject#32297)
  Fix <textarea> scrollHeight calculation (ampproject#32292)
  📖  Update testing docs (ampproject#32298)
  Fix missing space and mention `https` (ampproject#32293)
  ✨  [Story auto-analytics] Added validation and tests (ampproject#32288)
  🏗  Consolidate remaining CircleCI VM setup steps into separate scripts (ampproject#32290)
  🏗  Cache Karma's babel transforms during CircleCI builds (ampproject#32295)
  Add validation rules for aspect-ratio support via SSR (ampproject#32262)
  bump up viewer-messaging version (ampproject#32286)
  🖍🚀 Alternate `position: fixed/absolute` when docking/undocking (ampproject#32243)
  ✨ [Panning media] Transition siblings by ID (ampproject#32217)
  📦 Update dependency watchify to v4 (ampproject#32284)
  📦 Update dependency rollup to v2.38.1 (ampproject#32274)
  🐛♻️ ADS: XHRs race condtion and responsivnes fix (ampproject#32271)
  Add support for gdpr_conseented_providers, useCCPA_USPAPI, and _fw_us_privacy (ampproject#32275)
  ...
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.

None yet

5 participants