Bug 221234 - inline SVG inside a flex container with flex-direction default doesn't appear
Summary: inline SVG inside a flex container with flex-direction default doesn't appear
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2021-02-01 17:03 PST by karl
Modified: 2023-01-14 01:45 PST (History)
8 users (show)

See Also:


Attachments
Rendering of SVG + flex (533.69 KB, image/png)
2021-02-01 17:03 PST, karl
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description karl 2021-02-01 17:03:00 PST
Created attachment 418942 [details]
Rendering of SVG + flex

In the URL bar enter 

```
data:text/html,<div style="display:flex;"><svg viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1" fill="black"/></svg></div>
```

Expected:
A big black circle appears

Actual:
Nothing

This is working in both Blink and Gecko 

Attachment:
* Left: **Blink** Microsoft Edge Version 90.0.782.0 (Version officielle) Canary (64 bits)
* Center: **Gecko** Firefox Nightly 87.0a1 (2021-01-31) (64-bit)
* Right: **WebKit** Safari Tech Preview Release 119 (Safari 14.1, WebKit 16611.1.10.1)

Note to make it appear on Safari it is necessary to add a `flex-direction: column`.

This was initially reported on the webcompat project at 
https://github.com/webcompat/web-bugs/issues/66482
Comment 1 Radar WebKit Bug Importer 2021-02-08 17:03:15 PST
<rdar://problem/74120979>
Comment 2 Said Abou-Hallawa 2021-02-08 17:05:31 PST
I think this is related to bug 221110
Comment 3 Ahmad Saleem 2023-01-14 01:45:32 PST
I am still able to reproduce this bug in Safari Technology Preview 161 using test case from Comment 0 changed into JSFiddle:

Link - https://jsfiddle.net/eusaxhr8/show

Chrome Canary 111 show "black" circle and Firefox Nightly 110 does as well.

Adding "BrowserCompat" keyword tag.