Bug 220793

Summary:

Floated <legend> inside flexed <fieldset> is positioned incorrectly.

Product:

WebKit

Reporter:

Manuel Meister <manuel>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, orionrush, simon.fraser, smoley, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 10.15

See Also:

https://bugs.webkit.org/show_bug.cgi?id=245402

Attachments:

Description	Flags
Expected styling	none
Actual styling	none

Description Manuel Meister 2021-01-21 06:26:11 PST

Created attachment 418034 [details]
Expected styling

Steps to Reproduce:
Open: https://jsbin.com/nukoqozuko/edit?html,css,output

Expected result (image):
<legend> is in line with content
This works in Firefox 84, Chrome 87, Edge 87

Actual result:
<legend> behaves as if its not floated

Comment 1 Manuel Meister 2021-01-21 06:28:09 PST

Created attachment 418036 [details]
Actual styling

Comment 2 Smoley 2021-01-21 17:39:48 PST

Thanks for filing, I can reproduce this on Safari 13.1.3 and STP118.

Comment 3 Radar WebKit Bug Importer 2021-01-21 17:54:47 PST

<rdar://problem/73477828>

Comment 4 Manuel Meister 2021-01-25 23:48:23 PST

(In reply to Smoley from comment #2)
> Thanks for filing, I can reproduce this on Safari 13.1.3 and STP118.

Thank you. How can I see the progress of this bug?

Comment 5 Ben Rush 2022-03-22 07:39:47 PDT

I ran across this issue on a grid layout, and noted that it also effects flex layouts as well. I was testing against Safari 14x on OSX, and 15x on iOS. 

Here is a reduced test case in a grid layout: 
https://codepen.io/ShonenKnife/pen/dyJXERG

SO Question: 
https://stackoverflow.com/q/71560733/362445
SO discussion has expected vs actual layout images, and our eventual workaround.

Comment 6 Ahmad Saleem 2022-12-07 12:02:11 PST

Blink Commit - https://chromium.googlesource.com/chromium/src.git/+/906abd41e4f6c786a1927f6edd69d6926e20317b

https://github.com/WebKit/WebKit/blob/407bf5b3e4df1c25be1ac59021623d370e2f435c/Source/WebCore/style/StyleAdjuster.cpp#LL345

Remove - style.setFloating(Float::None);

and then

https://github.com/WebKit/WebKit/blob/407bf5b3e4df1c25be1ac59021623d370e2f435c/Source/WebCore/rendering/RenderBlock.cpp#L3310

and few more changes. Might be difficult for me and might need input but I think we can do similar changes.