Combination of form, fieldset, legend behaving incorrectly in Chrome 55.0.2883.28 beta (64-bit)
Reported by
hello@michaelpumo.com,
Nov 1 2016
|
||||||||
Issue descriptionChrome Version : 55.0.2883.28 beta (64-bit) URLs (if applicable) : https://dimt.co.uk Other browsers tested: Firefox, Safari Add OK or FAIL, along with the version, after other browsers where you have tested this issue: Safari: OK 9.1 (11601.5.17.1) Firefox: OK 49.0.1 IE: n/a What steps will reproduce the problem? (1) Visit the webpage https://dimt.co.uk (2) Click the book a table button on the top right. (3) Notice that the 'legend' of the form has dropped down. What is the expected result? The expected result is that it sits at the top of the fields like previous stable Chrome (54) had shown and current Firefox and Safari browsers. What happens instead? The legend is knocked down and there also appears to be something that shifts every element within the fieldset to the right. Please provide any additional information below. Attach a screenshot if possible. This is not a CSS issue. I have spent countless hours trying to debug this via the CSS, but I cannot figure it out - yet I am confident it is not the CSS after all. Sometimes, if I even remove the CSS stylesheet from the DOM completely via the web inspector, I still see the issue. There appear to be no styles (not even the default user agent styles) that cause this to happen. I can confirm this issue does not happen in Chrome 54. I'm afraid I tried to create an isolated test case for this, but cannot reproduce it successfully. It is a strange issue.
,
Nov 3 2016
Been experiencing the same issue as well. Here's a sample HTML exhibiting the issue, it seems the display: block; and width: 100% properties do not work properly on <legend> tags (the <legend> doesn't seem to take into account its width properly, as it's not crossing the full width of the page). If I change <legend> to any other tag it shows up correctly. - Stable Chrome (54) works fine - Stable Firefox (49) works fine - Nightly Firefox works fine - Stable Opera (41) works fine - IE Edge works fine - Chrome Beta (55) exhibits this issue
,
Nov 3 2016
I have put together an isolated test-case that shows this issue, on CodePen: http://codepen.io/michaelpumo/pen/VmZqrr
,
Nov 3 2016
Just spent a large part of the morning trying to work out which CSS rule had broken my form despite having made no recent CSS changes. Eventually loaded the page in Firefox, IE and Chrome 54 to realise the bug was with 55. Issue same as others, legend unaware of it's width.
,
Nov 7 2016
Tested this issue on Mac OS 10.12 and Ubuntu 14.04 using chrome latest stable M54-54.0.2840.90 and earlier version of chrome M53-53.0.2757.0. By opening the link http://codepen.io/michaelpumo/pen/VmZqrr observed the issue is seen on M53 & M54 as well. Reporter@ - Could you please confirm the provided test case is working fine on chrome latest M54 from your end. As you mentioned previously in the original comment saying it's working fine on M54 where it's not from our end.
,
Nov 7 2016
Hi all,
Same issue here.
Using codepen.io, just enter the following html and and observe the behavior on different version of Chrome.
<form>
<fieldset>
<legend>Legend</legend>
<input type="text" value="" placeholder="Field">
<legend>Legend</legend>
<input type="text" value="" placeholder="Field">
</fieldset>
</form>
F.
,
Nov 9 2016
brajkumar, testing our form in Version 54.0.2840.87 (64-bit) (Mac OS 10.12) it displays perfectly fine, however on 55.0.2883.35 beta (64-bit) (Win 7) it's badly broken.
,
Nov 9 2016
Breakage 1 49.0.2623.12 (back-merged) and 50.0.2626.0 (initially landed) LEGEND is lowered and touches the other element's top Bisect: 370195 (good) - 370208 (bad) Changelog: https://chromium.googlesource.com/chromium/src/+log/df415634..883acd6a?pretty=fuller Suspecting: r370201 as the only LEGEND-related change: 'Allow to set display "inline" on legend element' Breakage 2: 55.0.2846.0 LEGEND is inlined in the same row with the other element Bisect: 415575 (good) - 415579 (bad) Changelog: https://chromium.googlesource.com/chromium/src/+log/56e79bb7..103f0540?pretty=fuller Suspecting: r415577 as the only FIELDSET-related change: 'Add grid/flex layout support for <fieldset>' HAPPY END: 56.0.2901.0 Both issues were fixed Bisect: 427353 (bad) - 427365 (good) Changelog: https://chromium.googlesource.com/chromium/src/+log/c7d4aa6c..ba26074e?pretty=fuller Suspecting: r427364 that reverts r370201 "Allow to set display "inline" on legend element"
,
Nov 10 2016
I can still reproduce it with multiple <legend> tags: http://codepen.io/anon/pen/eBpaOX
,
Nov 10 2016
"Happy end" in #9 was for test case http://codepen.io/michaelpumo/pen/VmZqrr from #3 #10 test case http://codepen.io/anon/pen/eBpaOX is still broken by "Breakage 2" bisected in #9
,
Nov 14 2016
Issue 664812 has been merged into this issue.
,
Nov 16 2016
Able to reproduce this issue on windows 10, Ubuntu 14.04 and Mac 10.11.6 on chrome beta version 55.0.2883.28 with the provided test.html file Issue is broken in M55. Bisect Info: =========== Good build : 55.0.2845.0, Revision Range 415522 Bad build : 55.0.2846.0, Revision Range 415833 After executing the per-revision-bisect script, i got the following CL's between good and bad build versions =========================================== https://chromium.googlesource.com/chromium/src/+log/07605117e3929b21cf2cf14bbf913e22bc3cacc5..94405829a3ffa94bff257bb14650170f7422bad0 The suspecting Change Log is : ----------- https://chromium.googlesource.com/chromium/src/+/94405829a3ffa94bff257bb14650170f7422bad0 From the above CL suspecting the below change --------------------------- https://codereview.chromium.org/2215133005 glebl@- Could you please look into this issue, if it's related to your change? if not could you please help us to reassign this issue to the right owner.
,
Nov 18 2016
,
Nov 21 2016
The same issue affects certain forms and the visual editor on Wikipedia. We set `legend { float: left; display: inline-table; }` as part of a messy "reset stylesheet" used to remove all the built-in styling for legends and to work around various bugs in various browsers. With this new Chrome bug this appears to be no longer possible.
Example affected page: https://en.wikipedia.org/wiki/Special:LinkSearch
`display: inline-table` causes the same issue as `inline-block`, as detailed already in on <http://codepen.io/michaelpumo/pen/VmZqrr>.
`float: left` causes the legend to not be displayed at all. That may or may not be the same bug as this? Minimal test case: (https://jsfiddle.net/tdbthtra/)
<style>
legend { float: left; }
</style>
<fieldset>
<legend>derp</legend>
<p>bleh bleh</p>
</fieldset>
(screenshots of rendering in Chrome and Firefox attached)
Downstream bug report: https://phabricator.wikimedia.org/T151061
,
Nov 21 2016
,
Nov 28 2016
According to https://www.chromium.org/developers/calendar, Chrome 55 is expected to reach stable on Dec 6th, 2016. Is this issue expected to be fixed before then (or the release date pushed back), or should we be working on a workaround?
,
Dec 2 2016
Just to to update the latest behavior of the bug, Issue is still observed on windows 10 with chrome latest canaray M57-57.0.2938.0 glebl@ Could you please let us know is there any recent update available on this issue? Thanks!
,
Dec 2 2016
Chrone 55 released today with the same issues present and still no word when it will be fixed, disappointing.
,
Dec 2 2016
Seriously 55 has dropped and this wasn't fixed! I have a major UI fail which I'm going to have to bodge my css and site to work around this now despite this issue being raised here over a month ago.
,
Dec 2 2016
Yeah https://googlechromereleases.blogspot.co.uk/2016/12/stable-channel-update-for-desktop.html I'm in the same position I will now need to try patching the CSS to work around the issue, I didn’t think for a second 55 would be released before this had been fixed.
,
Dec 3 2016
Bit disappointed this wasn't fixed before Chrome 55 was released. It's a big regression and we've had to replace all our semantic form elements with divs until this is fixed.
,
Dec 3 2016
Joe, it may we worth adding your comment to https://bugs.chromium.org/p/chromium/issues/detail?id=670837 as well, the issue seems to being taken more seriously in that thread and they are asking for real world examples of the issue.
,
Dec 3 2016
,
Dec 4 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/0f77a4ef8c0218492b5b8689a793b34b0f5a34d8 commit 0f77a4ef8c0218492b5b8689a793b34b0f5a34d8 Author: glebl <glebl@chromium.org> Date: Sun Dec 04 05:43:54 2016 Floating legend should be added to the fieldset's anonymous block. If fieldset's legend is floating it should be added to the existing fieldset\'s anonymous block instead of creating a nested one. This is necessary because flexbox forces the floating legend to be non-floating and therefore if the legend needs to be floating it should be added to the fieldset's anonymous block. BUG= 661230 , 670837 TEST=fast/forms/fieldset/fieldset-legend-float.html Tested with real world websites: https://jsbin.com/zutekilusi/1/edit?html,css,output http://www.timico.co.uk/timico-ltd-application-form http://codepen.io/michaelpumo/pen/VmZqrr https://en.wikipedia.org/wiki/Special:ActiveUsers https://jsfiddle.net/tdbthtra/ Review-Url: https://codereview.chromium.org/2550963002 Cr-Commit-Position: refs/heads/master@{#436187} [add] https://crrev.com/0f77a4ef8c0218492b5b8689a793b34b0f5a34d8/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-legend-float-expected.html [add] https://crrev.com/0f77a4ef8c0218492b5b8689a793b34b0f5a34d8/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-legend-float.html [modify] https://crrev.com/0f77a4ef8c0218492b5b8689a793b34b0f5a34d8/third_party/WebKit/Source/core/layout/LayoutFieldset.cpp
,
Dec 6 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/eca396f71806b33ba869096ec28ae0d2c958b348 commit eca396f71806b33ba869096ec28ae0d2c958b348 Author: glebl <glebl@chromium.org> Date: Tue Dec 06 01:09:33 2016 Floating legend should be added to the fieldset's anonymous block. If fieldset's legend is floating it should be added to the existing fieldset\'s anonymous block instead of creating a nested one. This is necessary because flexbox forces the floating legend to be non-floating and therefore if the legend needs to be floating it should be added to the fieldset's anonymous block. BUG= 661230 , 670837 TEST=fast/forms/fieldset/fieldset-legend-float.html NOTRY=true NOPRESUBMIT=true Tested with real world websites: https://jsbin.com/zutekilusi/1/edit?html,css,output http://www.timico.co.uk/timico-ltd-application-form http://codepen.io/michaelpumo/pen/VmZqrr https://en.wikipedia.org/wiki/Special:ActiveUsers https://jsfiddle.net/tdbthtra/ Review-Url: https://codereview.chromium.org/2550963002 Review-Url: https://codereview.chromium.org/2552953002 Cr-Original-Commit-Position: refs/heads/master@{#436187} Cr-Commit-Position: refs/branch-heads/2924@{#352} Cr-Branched-From: 3a87aecc31cd1ffe751dd72c04e5a96a1fc8108a-refs/heads/master@{#433059} [add] https://crrev.com/eca396f71806b33ba869096ec28ae0d2c958b348/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-legend-float-expected.html [add] https://crrev.com/eca396f71806b33ba869096ec28ae0d2c958b348/third_party/WebKit/LayoutTests/fast/forms/fieldset/fieldset-legend-float.html [modify] https://crrev.com/eca396f71806b33ba869096ec28ae0d2c958b348/third_party/WebKit/Source/core/layout/LayoutFieldset.cpp
,
Dec 8 2016
Tested this issue on Windows-10, Ubuntu 14.04 and Mac OS 10.12 using chrome latest M55-55.0.2883.87 and M57-57.0.2945.0 by using the below URL's 1. http://codepen.io/anon/pen/eBpaOX 2. http://codepen.io/michaelpumo/pen/VmZqrr By opening the first URL observed the combination of form, fieldset, legend behaving correctly as expected across all OS By opening the second URL observed different behavior while comparing with the firefox browser across all OS as shown in the below screen-shot glebl@ Could you please confirm is this is the expected behavior of the issue? Note: Tested the same on chrome latest M56-56.0.2924.21 and observed the issue still persists. Thanks!
,
Dec 8 2016
yes, it's expected. Please see this comment https://bugs.chromium.org/p/chromium/issues/detail?id=670837#c65
,
Dec 8 2016
As per comment #28 adding TE-Verified labels for M-55 and M-57. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by hello@michaelpumo.com
, Nov 1 2016