align-self center and position sticky don't work together
Reported by
eyee...@gmail.com,
Jan 29 2018
|
|||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 Example URL: https://jsfiddle.net/irislieuw/p8ourosu/ Steps to reproduce the problem: 1. Open the JSFiddle URL 2. Scroll down in the rendered result. Notice that the text is displayed at the top of the gray container. 3. Comment out css for sticky positioning and re-run; now the text is displayed in the center of the gray container. What is the expected behavior? Text that says "I should be centered" should be vertically and horizontally centered in its gray container. Firefox and Safari both show the expected behavior. What went wrong? The text is horizontally centered, but not vertically centered. It gets rendered at the top of the container. Does it occur on multiple sites: Yes Is it a problem with a plugin? N/A Did this work before? Yes 63 Does this work in other browsers? Yes Chrome version: 64.0.3282.119 Channel: stable OS Version: OS X 10.13.3 Flash Version:
,
Jan 29 2018
Able to reproduce this issue on reported version 64.0.3282.119 and on latest canary 66.0.3334.0 using Windows 10,Mac 10.13.1 and Ubuntu 14.04 with link given in comment#0. Good Build: 64.0.3263.0 Bad Build: 64.0.3264.0 You are probably looking for a change made after 515390 (known good), but no later than 515391 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/0fa6d91431e578ca439086a6d8ebc367b10b6ed3..6dc4cef851061c3421ba4b05e51a37beb1364f38 Reviewed-on: https://chromium-review.googlesource.com/672423 Suspecting same from changelog. @fernandez@igalia.com: Please confirm the bug and help in re-assigning if it is not related to your change. Adding RB-Stable for M64. Please remove if not the case.
,
Jan 30 2018
Reproduce the issue on Chrome 64.0.3282.122/CrOS 10176.61.0 - Reks
,
Jan 30 2018
We can punt this bug to M-65.
,
Jan 30 2018
,
Jan 30 2018
I confirm the issue and currently cooking a patch for the issue.
,
Jan 31 2018
,
Feb 1 2018
Fix in progress, waiting for review: https://crrev.com/c/897949
,
Feb 2 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/a123787c6df637b7e7b33fef67e15a587978110f commit a123787c6df637b7e7b33fef67e15a587978110f Author: Javier Fernandez <jfernandez@igalia.com> Date: Fri Feb 02 12:32:16 2018 [css-grid] Allow alignment of in-flow items with non-static positions This is a fix for a regression introduced in r515391, where we landed the implementation of alignment for positioned objects in a Grid Layout container. We assumed that items with non-static positions shouldn't honor the CSS Box Alignment properties. This is only true for out-of-flow items, absolute or fixed positioned elements. However, sticky positioned elements are treated as relative positioned items, but they indeed use non-static position to define their behavior. Bug: 806622 Change-Id: Ibaed2c36530d81223d1491def9022e82cf9c3525 Reviewed-on: https://chromium-review.googlesource.com/897949 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#534029} [add] https://crrev.com/a123787c6df637b7e7b33fef67e15a587978110f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html [add] https://crrev.com/a123787c6df637b7e7b33fef67e15a587978110f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html [add] https://crrev.com/a123787c6df637b7e7b33fef67e15a587978110f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html [add] https://crrev.com/a123787c6df637b7e7b33fef67e15a587978110f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html [modify] https://crrev.com/a123787c6df637b7e7b33fef67e15a587978110f/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
,
Feb 2 2018
This issue should be FIXED now.
,
Feb 2 2018
,
Feb 2 2018
[Auto-generated comment by a script] We noticed that this issue is targeted for M-65; it appears the fix may have landed after branch point, meaning a merge might be required. Please confirm if a merge is required here - if so add Merge-Request-65 label, otherwise remove Merge-TBD label. Thanks.
,
Feb 2 2018
In my opinion, the regression is not very severe. I don't think a grid layout with sticky positioned items is a frequent use case. However, the patch is quite simple and safe, so we can give it a try and merge it.
,
Feb 2 2018
,
Feb 3 2018
Your change meets the bar and is auto-approved for M65. Please go ahead and merge the CL to branch 3325 manually. Please contact milestone owner if you have questions. Owners: cmasso@(Android), cmasso@(iOS), bhthompson@(ChromeOS), govind@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Feb 4 2018
Pls merge your change to M65 branch 3325 before 2:00 PM PT tomorrow, Monday (02/25/18) so we can pick it up for last dev release on Tuesday. Thank you.
,
Feb 5 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f commit 3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f Author: Javier Fernandez <jfernandez@igalia.com> Date: Mon Feb 05 08:36:22 2018 [css-grid] Allow alignment of in-flow items with non-static positions This is a fix for a regression introduced in r515391, where we landed the implementation of alignment for positioned objects in a Grid Layout container. We assumed that items with non-static positions shouldn't honor the CSS Box Alignment properties. This is only true for out-of-flow items, absolute or fixed positioned elements. However, sticky positioned elements are treated as relative positioned items, but they indeed use non-static position to define their behavior. Bug: 806622 Change-Id: Ibaed2c36530d81223d1491def9022e82cf9c3525 Reviewed-on: https://chromium-review.googlesource.com/897949 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#534029}(cherry picked from commit a123787c6df637b7e7b33fef67e15a587978110f) Reviewed-on: https://chromium-review.googlesource.com/901162 Cr-Commit-Position: refs/branch-heads/3325@{#290} Cr-Branched-From: bc084a8b5afa3744a74927344e304c02ae54189f-refs/heads/master@{#530369} [add] https://crrev.com/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html [add] https://crrev.com/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html [add] https://crrev.com/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html [add] https://crrev.com/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f/third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html [modify] https://crrev.com/3fa4da13a5bcf8750c3a633065f9c3f318ebaf5f/third_party/WebKit/Source/core/layout/LayoutGrid.cpp |
|||||||||||||
►
Sign in to add a comment |
|||||||||||||
Comment 1 by susanjun...@techmahindra.com
, Jan 29 2018