<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - [iOS] background-attachment: fixed should not crop background and ignore sizing properties"
   href="https://bugs.webkit.org/show_bug.cgi?id=234779">234779</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>[iOS] background-attachment: fixed should not crop background and ignore sizing properties
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 15
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>iPhone / iPad
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>iOS 15
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>CSS
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>christian@liebel.org
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=448149" name="attach_448149" title="Comparison of background-attachment: fixed (top) and scroll (bottom) on iOS Safari. The "fixed" background is greatly enlarged.">attachment 448149</a> <a href="attachment.cgi?id=448149&action=edit" title="Comparison of background-attachment: fixed (top) and scroll (bottom) on iOS Safari. The "fixed" background is greatly enlarged.">[details]</a></span>
Comparison of background-attachment: fixed (top) and scroll (bottom) on iOS Safari. The "fixed" background is greatly enlarged.

The CSS property `background-attachment: fixed` is not supported on iOS. Instead, the background scrolls with the page. However, the background is still cropped as if `background-attachment: fixed` would be applied. (I'm not exactly sure to which dimensions the background is cropped. There seems to be a difference if a responsive meta tag was set or not, with the tag set the background image is greatly enlarged. The `background-position` property seems to be ignored, see attachment.)

I use this effect to create a parallax effect where the user can reveal the entire background image by scrolling the page, as it works in most browsers including desktop Safari. It's fine for me to fall back to the `scroll` behavior, but therefore the background must not be cropped and the `background-position` and `background-size` properties must be applied. Due to the zooming and because `background-position` is ignored, the current result is hardly usable and I need to detect mobile Safari to explicitly set `background-attachment: scroll` there.

In short, as `background-attachment: fixed` is not supported on iOS, it should behave exactly as `scroll` and not take any different code paths.

Repro: <a href="https://christianliebel.github.io/bg-repro/">https://christianliebel.github.io/bg-repro/</a>
Source: <a href="https://github.com/christianliebel/bg-repro">https://github.com/christianliebel/bg-repro</a></pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>