Safari-only layout regression with ad iframe content: inline wrapper + inline-block ad creates extra vertical spacing

Question

ddcast OP

Created 6h

Replies 0

Boosts 0

Participants 1

Observed versions:

Reproduced on Tahoe / Safari 26 and iOS 26 Safari.
Not reproduced on v18 Safari.
Not reproduced in Chrome with the same reduced test setup.

We are seeing a Safari-only rendering issue affecting an ad creative inside an iframe on both desktop Safari and iOS Safari.

What we observe:

The issue is reproducible in Safari on OS X and iOS v26.
We do not reproduce it in Chrome with the same test setup.
We can reproduce it in a minimal test case, outside our site app code.
The issue appears tied to the rendered iframe document/layout, not our outer page layout.

The problematic rendered structure inside the iframe looks like this:

<div class="GoogleActiveViewElement" style="display:inline">
  <ins class="dcmads" style="display:inline-block;width:320px;height:50px">
    <script src="https://www.googletagservices.com/dcm/dcmads.js"></script>
  </ins>
</div>

Here is a simplified, local-reproducible version for testing:

<div class="GoogleActiveViewInnerContainer" style="left:0px; top:0px; width:100%; height:100%; position:fixed; pointer-events:none; z-index:-9999;"></div>
<div class="GoogleActiveViewElement" style="display:inline">
  <ins class="dcmads" style="display:inline-block;width:320px;height:50px">
    <script>
      document.write(
        '<a target="_blank" href="#"><img ' +
          'src="data:image/svg+xml;utf8,' +
            encodeURIComponent(
              '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="50">' +
                '<rect width="320" height="50" fill="#ffd8d8"/>' +
                '<text x="160" y="30" text-anchor="middle" font-family="Arial" font-size="14" fill="#222">' +
                  'img placeholder' +
                '</text>' +
              '</svg>'
            ) +
            '" ' +
        ' alt="Advertisement" border="0" width="320" height="50" style="display:block" /></a>'
      );
    </script>
  </ins>
</div>

In Safari, this produces extra vertical spacing / cutoff above the ad. In the test code you will only notice an added top spacing, but when rendered in a live ad, the bottom gets cut off.

A few details that may help:

If we manually change the inner ins.dcmads from display:inline-block to display:inline, or adding overflow:hidden, the spacing issue goes away.
If the loader script is moved outside the ins during manual experimentation, the issue also goes away.

This makes it look like a Safari layout/rendering issue involving an inline wrapper around an inline-block ad container during script-driven rendering.

Questions:

Is this a known Safari/WebKit layout issue involving inline + inline-block content in iframe documents?
Has there been any recent Safari/WebKit change that could affect this rendering path?
Is there a preferred reduced repro format for reporting layout issues like this?

Boost