Bug 207630

Summary:

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

Product:

WebKit

Reporter:

Roland Soos <roland>

Component:

Scrolling

Assignee:

Simon Fraser (smfr) <simon.fraser>

Status:

ASSIGNED ---

Severity:

Major

CC:

ahmad.saleem792, bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

All

See Also:

https://bugs.webkit.org/show_bug.cgi?id=207689

Attachments:

Description	Flags
Issue on iphone	none
Test reduction	none

Description Roland Soos 2020-02-12 07:18:18 PST

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.

Comment 1 Roland Soos 2020-02-12 23:31:25 PST

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

Comment 2 Radar WebKit Bug Importer 2020-02-13 10:15:50 PST

<rdar://problem/59427572>

Comment 3 Simon Fraser (smfr) 2020-02-13 11:25:41 PST

What Safari version are you seeing this in?

Comment 4 Roland Soos 2020-02-13 11:33:20 PST

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.

Comment 5 Roland Soos 2020-02-13 11:39:24 PST

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.

Comment 6 Simon Fraser (smfr) 2020-02-13 12:11:56 PST

I this this is a scrolling tree bug.

Comment 7 Simon Fraser (smfr) 2020-05-04 22:12:13 PDT

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">...

Comment 8 Simon Fraser (smfr) 2020-05-04 22:16:34 PDT

Doesn't happen in Firefox though.

Can we get a testcase with unminified JS?

Comment 9 Roland Soos 2020-05-04 22:27:13 PDT

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

Comment 10 Simon Fraser (smfr) 2020-05-05 13:52:27 PDT

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

Comment 11 Simon Fraser (smfr) 2020-06-01 18:21:00 PDT

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

Comment 12 Simon Fraser (smfr) 2020-06-01 18:38:50 PDT

Created attachment 400775 [details]
Test reduction

Comment 13 Simon Fraser (smfr) 2020-06-01 18:53:05 PDT

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.

Comment 14 Ahmad Saleem 2022-08-03 15:34:56 PDT

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!