Bug 207630 – Elements are rendering at the wrong place (scrollIntoView happens on a timer)

• Status: ASSIGNED
• Component: Scrolling

[Roland Soos]

Created attachment 390513 [details]
Issue on iphone

Steps to reproduce:
1. Open http://smartslider3.com/bugs/webkit/carousel1/
2. Click on the right arrow


What should happen?
There should be one or more cards

What went wrong?
If only one card fit, there might be no card at all and the animation is bad.
If multiple card fit, there might be no card or single card visible.

This issue somehow related to the element with the class: .n2-ss-slider-pane  The cards are absolute positioned to this element and it seems like this positioning is not respected in Safari somehow. Sometimes in the inspector this element seems like it is shifted to the left which should not been possible.


This example works fine in every other major browsers.

[Roland Soos]

It seems like that the problem is that Safari changes the overflow:hidden div's scrollLeft value which shifts the rendering. Very strange...

document.querySelector('.n2-ss-slider-pane').scrollLeft

[Radar WebKit Bug Importer]

<rdar://problem/59427572>

[Simon Fraser (smfr)]

What Safari version are you seeing this in?

[Roland Soos]

iPhone: 13.3.1
Mac mini: OSX Catalina with Technology Preview February 5, 2020

Also happened on OSX Catalina stable Safari and on an iPad with IOS 13. I can write you the exact version numbers of these tomorrow.

[Roland Soos]

Fails on Windows 10 build R256527. I had to resize the browser to fit only one card and it produced the very same error what I saw on iPhone.

[Simon Fraser (smfr)]

I this this is a scrolling tree bug.

[Simon Fraser (smfr)]

This actually looks like a content bug.

After clicking the right arrow, I see the "Blouse with embroidery" panel on the left. The other two panels are missing, but they have transforms that push them out of view:

        <div data-slide-duration="0" data-id="2007" data-title="Slide 7" style="width: 330px; margin-left: 35px; margin-right: 35px; left: 0px; height: 440px; transform: matrix(1, 0, 0, 1, 10000, 0);" class="n2-ss-slide n2-ss-slide-2007 n2-ss-canvas n2-ow" aria-hidden="true">...

[Simon Fraser (smfr)]

Doesn't happen in Firefox though.

Can we get a testcase with unminified JS?

[Roland Soos]

Simon, most of the source codes are not minified even if the filename is .min.js. As I see the only minified part is the GSAP animation engine, do you need me make it readable? 

I do not think that it will be content/user error. Check the value of the following code when the content shifted. It will has a value while it shouldn't. Maybe the touch makes that element to scroll? (touch/pointer events are .preventdefault()-ed.)

document.querySelector('.n2-ss-slider-pane').scrollLeft

[Simon Fraser (smfr)]

Ah, yes, I can see that this might be triggered by the value of scrollLeft being wrong at some point relative to other things.

[Simon Fraser (smfr)]

Ah, we're scrolling the overflow:scroll in response to a focus change.

[Simon Fraser (smfr)]

Created attachment 400775 [details]
Test reduction

[Simon Fraser (smfr)]

To fix this we're going to have to make the scrollIntoView resulting from focus() synchronous, because a setting of scrollLeft or scrollTop immediately after has to override the scrollIntoView.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and also on iPhone 13 Pro Max (iOS 15.6) using "Test Reduction, where opening it will lead to "600" value card as selection.

While in case of other browsers, Firefox Nightly 105 and Chrome Canary 106, only two card remain visible and there is no scrolling or scrollbar in the attached "Test Reduction".

Just wanted to share updated testing results. Thanks!