Issue metadata
Sign in to add a comment
|
Absolutely positioned box is misaligned in vertical layout inside iframe
Reported by
na...@moon.email.ne.jp,
Apr 15 2018
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0 Steps to reproduce the problem: See an attached file or visit https://jsfiddle.net/ta4k0hto/11/ What is the expected behavior? Left edge of the fixed element touches left edge of viewport. What went wrong? There is 17px gap (same as width of vertical scrollbar) between left edge of the fixed element and left edge of viewport. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 68.0.3397.0 Channel: canary OS Version: 10.0 Flash Version: Shockwave Flash 29.0.0.150
,
Apr 15 2018
,
Apr 19 2018
Able to reproduce the issue on reported chrome version 68.0.3397.0 and on the latest canary 68.0.3399.0 using Windows 10 and Ubuntu 14.04. Note: Issue is not seen on Mac 10.13.1 Bisect Information: =================== Last Good Build: 66.0.3344.0 First Bad Build: 66.0.3345.0 Suspecting the same from Comment#1. https://chromium.googlesource.com/chromium/src/+/96f85b68747a679ea1ac4cd05d6743ae5f7142b7 Review URL: https://chromium-review.googlesource.com/857902 Note: Adding RB-stable as this seems to be a recent regression, please remove if not required. @Steve Kobes: Please help in assigning it to the right owner if this is not related to your change.
,
Apr 19 2018
,
Apr 21 2018
This issue happens outside iframe if CSS properties that may cause hardware acceleration, such as `animation` or `transform: translateZ(0)`, are applied to the absolutely positioned element itself or its descendants. I filed issue 835555 for the case outside iframe but that issue may be a duplicate of this issue.
,
Apr 23 2018
Issue 835555 has been merged into this issue.
,
May 7 2018
A non-RLS repro: https://output.jsbin.com/tigoqey/quiet LayoutBox::FlipForWritingModeForChild uses border box width which includes the scrollbar. But the child's Location().X() is relative to the right edge of the client area (scrolling content).
,
Aug 22
Just tried the test in #c7 and found it has been fixed by https://chromium.googlesource.com/chromium/src/+/e0a4d9cf005bf241cd06a6777196e12673c2eeee. The #c0 issue still exists.
,
Aug 23
Thanks for the update. I'm afraid I don't have bandwidth to fix this right now so I am marking it available.
,
Aug 23
The fix for bug 853945 might also fix this bug. Moving target to M-70.
,
Aug 31
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d44db9636279ee5238407ea776dbaab82cfd5363 commit d44db9636279ee5238407ea776dbaab82cfd5363 Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Fri Aug 31 23:08:16 2018 [PE] Fix LayoutBox Client/Padding/Content boxes with scrollbars (especially vertical-rl) This CL tries to correct the box model when there are scrollbars, especially in vertical-rl mode. According to https://www.w3.org/TR/css-overflow-3/#scrollbar-layout, scrollbars "should be inserted between the inner border edge and the outer padding edge". Changes to the previous code: - Padding|client box now excludes scrollbars, with the help of (Top|Left|Bottom|Right)ScrollbarWidth methods which can get the scrollbar widths in physical directions in various writing modes. - Content box is now based on the new padding box by excluding the paddings. - Layout of contents is now based on the correct box model. In vertical-rl mode, layout of contents in blocks direction starts from the inner edge of the new content box which has been properly adjusted for the scrollbar. - Now LayoutBox::Location() and Location::PhysicalLocation() in the initial scroll state are correct in all writing-modes. Previously when they were incorrect in vertical-rl mode and some flex box directions, requiring an artificial scroll offset to paint the content at correct place. - With the correct padding box, content box, Location(), PhysicalLocation(), we no longer need the band-aid code to create the correct painted result. The changed code is mostly in LegacyLayout code. Some changed code is in LayoutNG that previously converted correct LayoutNG geometries into the problematic geometries that were previously expected by LegacyLayout. The correct box model is required by blink-gen-property-trees because we can't band-aid the incorrect results in paint properties after painting. Bug: 833167 , 853945 , 858843 , 878809 , 876266 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;luci.chromium.try:linux-blink-gen-property-trees;luci.chromium.try:linux_layout_tests_layout_ng;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I41faf1ca0bfb95cb287c72703f08c8bd44e9e752 Reviewed-on: https://chromium-review.googlesource.com/1185901 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#588201} [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/WebKit/LayoutTests/external/wpt/2dcontext/scroll/2d.scrollPathIntoView.verticalRL-expected.txt [add] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/WebKit/LayoutTests/external/wpt/css/cssom-view/cssom-getBoundingClientRect-vertical-rl-ref.html [add] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/WebKit/LayoutTests/external/wpt/css/cssom-view/cssom-getBoundingClientRect-vertical-rl.html [add] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/WebKit/LayoutTests/fast/block/positioning/vertical-rl/absolute-in-vertical-rl-iframe-expected.html [add] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/WebKit/LayoutTests/fast/block/positioning/vertical-rl/absolute-in-vertical-rl-iframe.html [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/BUILD.gn [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/README.md [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_block.h [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_block_flow.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_block_flow_line.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_box.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_box.h [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_box_test.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_flexible_box.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_flexible_box.h [add] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_flexible_box_test.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_object.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_view.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/layout_view.h [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/ng/layout_ng_mixin.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/layout/ng/ng_block_node.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/paint/compositing/compositing_layer_property_updater.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/paint/paint_property_tree_builder.cc [modify] https://crrev.com/d44db9636279ee5238407ea776dbaab82cfd5363/third_party/blink/renderer/core/paint/paint_property_tree_builder_test.cc
,
Aug 31
,
Sep 3
Verified the fix on Ubuntu 14.04 using Chrome version #71.0.3541.0 as per the comment #0. Note: Couldn't verify the fix on Windows 10 as the build isn't available yet. Attaching screenshot for reference. Observed the alignment was proper. Hence, the fix is working as expected. Note: Able to reproduce the issue on chrome version with out fix. Thanks...!! |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by woxxom@gmail.com
, Apr 15 2018