New issue
Advanced search Search tips

Issue 709562 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

scrollIntoView() doesn't follow specs

Reported by kang...@gmail.com, Apr 7 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce the problem:
http://jsfiddle.net/03sut5wo/6/
Top/Bottom
1. To see the problem more clearly, reduce the height of the window so that the yellow div overflows.
2. click the scroll bottom or top button
3. See that the border of the green div is not aligned to the top/bottom of the frame.

Left/Right
1. Reduce the width of the window until it is wide enough to just contain the green div.
2. Scroll the left side of the grid out of view.
3. Click scroll bottom or top button
4. See that the left border of the green div is not aligned to the left of the frame.
5. Scroll the right side of the green div out of view.
6. Click scroll bottom or top button
7. See that the right border of the green div is not aligned to the right of the frame.

What is the expected behavior?

According to the specs (https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview)
Given scrollIntoView(args)
- if args is not specified or true, behavior should be scrollIntoView { block: start, inline: nearest }
- if args is false, behavior should be scrollIntoView { block: end, inline: nearest }

With block direction top->bottom, the element's top/bottom edge should align with the top/bottom edge of the view.

With inline direction left->right
- if the element's left edge is out of view, but the element's right edge is in view, the element's left edge should be aligned with the left edge of the view.
- if the element's left edge is in view, but the element's right edge is out of view, the element's right edge should be aligned with the right edge of the view.
- if both the left and right edges of the element are out of view, don't do anything. 

What went wrong?
For scrollIntoView(), the outermost container's element's top edge is aligned to the view's top edge.
For scrollIntoView(false), container borders make it so that the element's bottom edge isn't visible at all.

In regards to inline behavior, Chrome doesn't align to the nearest left/right edge.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 57.0.2987.133  Channel: stable
OS Version: 6.3
Flash Version: Shockwave Flash 25.0 r0

block: start/end behavior is followed according to the specs by IE & Firefox.
inline: nearest behavior is only followed by Firefox. IE seems to always use inline: start.

I'm aware that scrollIntoView options (https://bugs.chromium.org/p/chromium/issues/detail?id=648446) are not supported yet, but the default behavior for a boolean argument should still be respected.

-While testing, also noticed that Chrome scrolling doesn't treat zoom as a transparent operation. Clicking scroll up/down 1 pixel will give fractional scrollTop values at zoom levels other than 100%. And interestingly, scroll down 1 pixel (scrollTop -= 1)
stops working when the zoom level is less than 100%. IE & Firefox always returns integer values for scrollTop, and scrollTop -= 1 consistently works accross all zoom levels.
 
Components: Blink>Scroll
Cc: bokan@chromium.org majidvp@chromium.org
Labels: Hotlist-Input-Dev
Owner: sunyunjia@chromium.org
Status: Assigned (was: Unconfirmed)
Seems related to not taking the border box into account. Works correctly in FireFox.
Sandra, any update on this?

Sign in to add a comment