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

Modify restrictions for in-viewport expansion #25880

Merged
merged 7 commits into from
Jan 14, 2020

Conversation

glevitzky
Copy link
Contributor

Flexible ad slot expansion was launched earlier this year in August. The new behavior enables large creatives to be rendered within smaller ad slots, necessarily requiring the runtime to expand the slot element at render-time. As preparation for the launch, we made a slight change to AMP’s no-reflow policy, to allow in-viewport expansion if the following criteria hold:

  • Width-only expansion,
  • Element has no siblings,
  • Parent element is an AMP element,
  • Parent element's width is >= the new element width

These conditions, however, are too restrictive to allow in-viewport expansion in many cases, resulting in cropped ad slots that load within the viewport. This PR will modify the criteria for in-viewport expansion to the following:

  • Width-only expansion
  • Cumulative width of all sibling elements and new width is < parent width

This should result in many fewer cropped ad slots, without introducing any risk of reflow.

@glevitzky glevitzky changed the title Modify restrictions for in-viewport expansion (WIP) Modify restrictions for in-viewport expansion Dec 5, 2019
src/service/resources-impl.js Outdated Show resolved Hide resolved
src/service/resources-impl.js Outdated Show resolved Hide resolved
(parent.getLayoutWidth && parent.getLayoutWidth()) ||
parent./*OK*/ getBoundingClientRect().width;
let cumulativeWidth = widthDiff;
for (let i = 0; i < parent.childElementCount; i++) {
Copy link
Contributor

Choose a reason for hiding this comment

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

What if this is a structure like this:

                   super-parent
                  /            \
    kind-of-useless-parent     actual-sibling
            |
    resizing-element

Copy link
Contributor Author

@glevitzky glevitzky Dec 19, 2019

Choose a reason for hiding this comment

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

I don't think this should be an issue. <resizing-element> will never grow wider than <kind-of-useless-parent>, so the invariant that width(<kind-of-useless-parent>) + width(<actual-sibling>) <= width(viewport) should hold.

@dvoytenko
Copy link
Contributor

Ok. I'm ok with this change, but please wait for @jridgewell to review as well.

state.resize = true;
},
mutate: state => {
if (state.resize) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should overflowCallback be called?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If I'm reading the code right, I don't think it's relevant in this case as there's no overflow element.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Discussed with Dima; realized callback is necessary & added.

@glevitzky glevitzky requested review from erwinmombay and removed request for erwinmombay January 14, 2020 22:15
Copy link

@dreamofabear dreamofabear left a comment

Choose a reason for hiding this comment

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

Attempting to rubber stamp bundle size change.

@glevitzky glevitzky merged commit 4f2368e into ampproject:master Jan 14, 2020
@glevitzky glevitzky deleted the isWidthOnly-fix branch January 14, 2020 23:01
@glevitzky
Copy link
Contributor Author

Thanks, all!

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

7 participants