Exploring the intriguing question at hand, let's kick off with an analysis of the latest gif provided.

Gif #3

For fixed background elements, it's crucial to note that iOS lacks support for background-attachment: fixed, necessitating a JS workaround for implementation.

Even if iOS were to back background-attachment: fixed, its functionality is confined to background images and not as versatile as desired. Interestingly, similar effects can be achieved using pure CSS:

* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: 1000px;
  background: red;
}

.spacer {
  width: 100%;
  height: 200px;
  background: transparent;
}

.background-scroller {
  background: lightgrey;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="section"></div>
<div class="spacer"></div>
<div class="section"></div>
<div class="background-scroller">
  Place your content here
</div>

While some platforms rely on dynamic ad changes within "spacer" divs, this can also be efficiently addressed through CSS leveraging position: sticky.

* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: 1000px;
  background: red;
}

.spacer {
  width: 100%;
  height: 200px;
  background: transparent;
}

.background-scroller {
  background: lightgrey;
  width: 100%;
  height: 100vH;
  position: sticky;
  top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
}

.section-wrapper {
  position: relative;
}

<div class="section-wrapper">
  <div class="background-scroller">
    Content A
  </div>
  <div class="section"></div>
  <div class="spacer"></div>

  <div class="background-scroller">
    Content B
  </div>

  <div class="section"></div>
  <div class="spacer"></div>

  <div class="section"></div>
</div>

Various websites employ different techniques like the intersection observer API, but in certain cases, simple CSS methods are effective without relying on JavaScript. These approaches excel in creating impactful visual results.

Gif #2, Gif #1

The complexity demonstrated in these gifs warrants careful examination.

Cross-origin constraints between parent frames and iframes pose limitations on communication channels, requiring specific properties to navigate such scenarios effectively.

An inspection of iframe attributes indicates usage of the data-is-safeframe attribute, segregating irrelevant details for analytical purposes.

<iframe src="" data-is-safeframe="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"></iframe>

The SafeFrame API, crafted by IAB (Interactive Advertising Bureau), facilitates communications between advertisers and ad providers. However, explicit documentation on its actual application remains scarce, even affecting Google's endeavors constrained by established norms.

A noticeable jitter arises from this method.

Unexpectedly large jitters during rapid event processing via postMessage prompted closer scrutiny, culminating in a demonstration via JSFiddle to address compatibility concerns.

• To access the embedded page in the iframe, click here; source code available here
• Experience iframe handling displaying and interaction with postMessage(): Click here; access source code here

Console insights confirm efficient management of fast events like scroll via postMessage, validated through the "disco iframe" visualization.

Upon evaluation, performance discrepancies likely result predominantly from intricate site configurations rather than systemic issues.

Conclusion

With particular insight into Google's methodologies remaining elusive, postMessage emerges as a pragmatic choice accentuated by your exploration. Absent alternative avenues, this mirrors potential synergy with Google's strategies.

Potential observed performance challenges primarily stem from nuanced site-specific setups rather than inherent methodological deficiencies.

This encapsulates existing insights, acknowledging unexplored technologies and strategies that may influence outcomes. The interactive nature of this query encourages corrective feedback where applicable!

Edit #1

Rigorous research efforts have unveiled enlightening insights from reputable sources, incorporating learnings from both Google and sites implementing akin effects.

Summary

The underlying mechanics parallel my resolutions outlined for Gif #3.

Detailed Analysis

Intricate terminologies populate the discussion, encompassing designations such as Interscroller, Flying carpet, and sticky ads, collectively embodying comparable advertising constructs. Notably, ads embracing this format often leverage AMP technology pioneered by Google.

Evaluating a platform featuring a Flying Carpet Ad confirmed trends indicating widespread adoption:

https://i.stack.imgur.com/DEkuX.png

Pervasiveness of AMP integration extends beyond singular instances, evidencing diverse entities embracing innovative ad structures.

Deconstruction of HTML compositions pivots around the <amp-fx-flying-carpet> component extending towards nested <iframe> elements, revealing significant design fundamentals:

<div class="amp-article-ad">
  <amp-fx-flying-carpet>
    <div class="i-amphtml-fx-flying-carpet-container">
      <amp-ad>
        <iframe></iframe>
      </amp-ad>
    </div>
  </amp-fx-flying-carpet>
</div>

Simplification underscores core components devoid of extraneous clutter:

<div class="amp-article-ad">
  <amp-fx-flying-carpet>
    <div class="i-amphtml-fx-flying-carpet-container">
      <amp-ad>
        <iframe></iframe>
      </amp-ad>
    </div>
  </amp-fx-flying-carpet>
</div>

Outer wrappers serve as visible enclosures accommodating ad displays, contained vessels strategically dislodged from conventional document flow through properties like position: fixed. These detached silos envelop <iframe> arenas hosting advertisement contents.

Strategic positioning coupled with astute CSS property implementations harmonize to cultivate engrossing ad experiences.

Voyaging deeper reveals official AMP documents offering nuanced exemplars:

I've emulated this methodology in a streamlined context signifying its efficacy:

<p>Content</p><p>Content</p><p>Content...</p>

  <div class="flying-carpet-wrapper">
    <div class="amp-ad-wrapper">
      <div class="amp-ad">
         <iframe src="https://example.com"></iframe>
      </div>
    </div>
  </div>

  <p>Content</p><p>Content</p><p>Content...</p>