Issue metadata
Sign in to add a comment
|
inputs often have a different vertical-align:middle value than non-inputs
Reported by
mike.mcf...@calltrackingmetrics.com,
Nov 2 2017
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.75 Safari/537.36
Example URL:
Steps to reproduce the problem:
<!DOCTYPE html>
<html>
<head>
<style>* { box-sizing: border-box }</style>
</head>
<body>
<input style="height:32px;vertical-align:middle">
<select style="height:32px;vertical-align:middle"></select>
</body>
</html>
What is the expected behavior?
What went wrong?
In Chrome 62 the vertical alignment is usually off by one pixel between the two elements.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? Yes 61
Does this work in other browsers? Yes
Chrome version: 62.0.3202.75 Channel: stable
OS Version: OS X 10.12.6
Flash Version:
Changing the zoom level will cause some elements to align properly, but then other elements that used to align properly will be off by 1 pixel.
It seems important that one of the elements be an input and the other not be an input... div and select align between each other correctly, and inputs are aligned correctly with themselves, but inputs are often misaligned by 1 pixel with divs or selects.
Height, margin, padding, borders, etc. do not seem to affect the results, and this problem seems limited to Chrome 62.
,
Nov 3 2017
Able to reproduce this issue on reported version 62.0.3202.75 and on latest canary 64.0.3256.0 using Mac 10.12.6 with steps mentioned in comment#0. Issue is not seen in Linux and Winodws Manual Bisect Info: ================== Good Build: 62.0.3169.0 Bad Build: 62.0.3170.0 You are probably looking for a change made after 490326 (known good), but no later than 490327 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/97eedd95bbffdf6b2a24494a599a5089bcad1f94..abc4634436dd4fc1b909ec04e589288464d432aa Reviewed-on: https://chromium-review.googlesource.com/543141 Suspecting same from changelog. @karlo: Please confirm the bug and help in re-assigning if it is not related your change. Adding RB-Stable and requesting for review of this before next stable refresh if fix for this is available in time. Thanks!
,
Nov 10 2017
+ Reviewer Can we target this for M64? or merge to M63 is it's really needed?
,
Nov 10 2017
,
Dec 14 2017
Since this is a recent regression, can we get a fix for M65? tagging as RBs for M65. Feel free to change if needed.
,
Dec 14 2017
Could you help with this when you're back Christian?
,
Jan 3 2018
cbiesinger@, Friendly ping to get an update on this issue as it is marked as stable blocker. Thanks..!
,
Jan 9 2018
Gentle ping to get an update on this issue.
,
Jan 17 2018
cbiesinger@ Ping! This issue is marked as RB-Stable for M65. Could you please let us know is there any latest update available on this issue? Thanks!
,
Jan 23 2018
Friendly ping to get an update on this issue as it is marked as stable blocker for M65. Thanks.
,
Jan 31 2018
Adding stability sheriff for further help.
,
Feb 5 2018
,
Feb 6 2018
,
Feb 9 2018
Working on this
,
Feb 13 2018
M65 Stable promotion is coming VERY soon. Your bug is labelled as Stable ReleaseBlock, pls make sure to land the fix and request a merge into the release branch ASAP. Thank you.
,
Feb 14 2018
Soo, after spending some time reading code and trying to reproduce this bug, I found that this is mac-only and I do not have a mac. My best guess (?) is that this bug may be related to the code here: LayoutUnit LayoutTheme::BaselinePositionAdjustment( But I'm not sure what the bug is or how it could be fixed. Someone with a mac needs to take a look. cc'ing some people who may be able to help. Also, not sure that a one-pixel offset that's mac-only needs to be a release blocker...
,
Feb 14 2018
Would you mind taking a quick look Koji? Removing RB-S.
,
Feb 14 2018
Tested a little before it got assigned. I can reproduce the problem on my Mac, but it seems that --single-process no longer works on Mac (worked a couple of weeks ago, for sure), so it's hard for me to debug.
,
Feb 15 2018
FYI, Reported bug 812572 for the --single-process issue.
,
Feb 26 2018
Not a P1 issue because it looks ugly but does not cause functional problems. Still, should get it fixed.
,
Jun 5 2018
Issue 848721 has been merged into this issue.
,
Jun 5 2018
,
Jun 5 2018
I am not sure Issue 848721 is really a duplicate, because there are some significant differences (input vs. div, dpi vs. browser zoom, etc.). The original example certainly renders fine for me. However, to contribute to this issue, I created an example that shows the same misalignment: http://jsbin.com/pofunalere/edit?html,css,output . The misalignment of the <input> occurs for me in Chrome 67.0.3396.62 on Windows 10, normal dpi. It changes depending on the zoom level set in Chrome. There is no misalignment in Firefox or IE11.
,
Jun 6 2018
Thank you, #23, more samples are helpful, especially the one without needing a zoom. This all happens when the baseline position is fractional, which started by the CL in #2. <input> is, from the layout perspective, a div with some properties applied, and hi-dpi and browser zoom share the same code (though I admit I'm not very familiar with zoom and hi-dpi.) The CL in #2 added rounding fractional somewhere late in the rendering pipeline, and I think there are some layout code that needs to adopt to the behavior.
,
Jun 7 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4 commit eb41d43f5cd0e6debb1f001291d7d13b3f4826b4 Author: Koji Ishii <kojii@chromium.org> Date: Thu Jun 07 02:17:53 2018 Stop rounding vertical position for 'vertical-align: middle' This patch stops rounding vertical position for 'vertical- align: middle'. The rounding was added in 2012[1], for crbug.com/130888 (wkbug.com/91464) where 'vertical-align: middle' causes overflow with subpixel layout. The vertical-position is accumulated in multiple levels in the current layout engine. It is computed in this function, then tweaked in ComputeLogicalBoxHeights, ComputeLogicalBoxHeights, and maybe a few more. Since when Blink enabled fractional (LayoutUnit) baseline position in CL:543141, rounding earlier makes harder to align to boxes that are computed in different way but should result in the same vertical position. By not rounding in this function, the mentioned CL rounds in caller functions. This patch changes heights and vertical positions in ~10 test results, but not vertical-align-middle-overflow.html, the test added by the change above. As this change requires rebaselines, this may break other cases, or still different rounding may be applied by different scenarios. Not all cases are trackable, but new baselines look more similar to LayoutNG, which computes vertical position only once. [1] https://trac.webkit.org/changeset/122883/webkit Bug: 780862 Change-Id: Icc8868952428950e5e10036ddef2b6daa07f4ba2 Reviewed-on: https://chromium-review.googlesource.com/1088334 Commit-Queue: Koji Ishii <kojii@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#565146} [rename] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/paint/invalidation/vertical-align1-expected.txt [rename] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/paint/invalidation/vertical-align2-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/css1/formatting_model/height_of_lines-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/css2.1/t100801-c544-valgn-03-d-agi-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/css2.1/t100801-c544-valgn-03-d-agi-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-auto-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-under-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/encoding/utf-16-big-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/encoding/utf-16-big-endian-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/encoding/utf-16-little-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/linux/fast/encoding/utf-16-little-endian-expected.txt [delete] https://crrev.com/4db54417f0ee15c0f4abc0f8a63bfa47b45f67a3/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/vertical-align1-expected.txt [delete] https://crrev.com/4db54417f0ee15c0f4abc0f8a63bfa47b45f67a3/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/vertical-align2-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac-mac10.12/css2.1/t100801-c544-valgn-03-d-agi-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac-mac10.12/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-under-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/css1/formatting_model/height_of_lines-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/css2.1/t100801-c544-valgn-03-d-agi-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/css2.1/t100801-c544-valgn-03-d-agi-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-auto-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-under-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/encoding/utf-16-big-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/encoding/utf-16-big-endian-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/encoding/utf-16-little-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/mac/fast/encoding/utf-16-little-endian-expected.txt [delete] https://crrev.com/4db54417f0ee15c0f4abc0f8a63bfa47b45f67a3/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/vertical-align1-expected.txt [delete] https://crrev.com/4db54417f0ee15c0f4abc0f8a63bfa47b45f67a3/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/vertical-align2-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/css2.1/t100801-c544-valgn-03-d-agi-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/css2.1/t100801-c544-valgn-03-d-agi-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-auto-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-under-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/encoding/utf-16-big-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/encoding/utf-16-big-endian-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/encoding/utf-16-little-endian-expected.png [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/WebKit/LayoutTests/platform/win/fast/encoding/utf-16-little-endian-expected.txt [modify] https://crrev.com/eb41d43f5cd0e6debb1f001291d7d13b3f4826b4/third_party/blink/renderer/core/layout/line/root_inline_box.cc
,
Jun 7 2018
I tested reported cases, but probably not all. Please let us know if you still see cases where it misaligns. Thank you both for reporting this problem to us. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Nov 2 2017Labels: Needs-Bisect Needs-Triage-M62