Bug 220793 - Floated <legend> inside flexed <fieldset> is positioned incorrectly.
Summary: Floated <legend> inside flexed <fieldset> is positioned incorrectly.
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-01-21 06:26 PST by Manuel Meister
Modified: 2022-12-07 12:02 PST (History)
7 users (show)

See Also:


Attachments
Expected styling (16.78 KB, image/png)
2021-01-21 06:26 PST, Manuel Meister
no flags Details
Actual styling (17.63 KB, image/png)
2021-01-21 06:28 PST, Manuel Meister
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.