<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 - Hover to scroll doesn't work in Webkit (Apple engineer told me to submit as a bug)"
   href="https://bugs.webkit.org/show_bug.cgi?id=241737">241737</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Hover to scroll doesn't work in Webkit (Apple engineer told me to submit as a bug)
          </td>
        </tr>

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

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

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </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>JavaScriptCore
          </td>
        </tr>

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

        <tr>
          <th>Reporter</th>
          <td>emory.fierlinger@gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>I have a dynamic horizontal slider on a website, half way down this page: <a href="https://www.eightyone.co.nz/projects/safe-night-a-thon">https://www.eightyone.co.nz/projects/safe-night-a-thon</a>

When a user hovers over the left/right arrows, the browser is supposed to slowly move them along the slider. This works in both Chrome and Firefox, but not Webkit/Safari.

After talking with Apple engineers at WWDC22, they have diagnosed this as a Webkit bug, and have told me to file it as such here. Here is the code:

var amount = '';

function scroll() {
  $('#horizontal-scroll-parent').animate({
    scrollLeft: amount
  }, 25, 'linear', function() {
    if (amount != '') {
      scroll();
    }
  });
}
$('#next').hover(function() {
  amount = '+=25';
  scroll();
}, function() {
  amount = '';
});
$('#back').hover(function() {
  amount = '-=25';
  scroll();
}, function() {
  amount = '';
});</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>