Bug 209681

Summary: CSS Columns child items hidden when relatively positioned
Product: WebKit Reporter: onlyforhisname
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: mail, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: Mac   
OS: macOS 10.14   
Attachments:
Description Flags
Shows the column bug occurring with the minimum amount of css none

Description onlyforhisname 2020-03-27 14:50:16 PDT 
Created attachment 394760 [details]
Shows the column bug occurring with the minimum amount of css

Noticed in Safari Version 13.1 (14609.1.20.111.8), verified still present in Mojave r259135

(See attachment or https://codepen.io/onlyforhisname/pen/LYVMLEV)
When an item contains multiple columns using column-count or column-width and the first-level items have overflow hidden, any second-level children with position relative still take up space but are not visible (unless they are in the first column).

May be related to https://bugs.webkit.org/show_bug.cgi?id=207991
Comment 1 onlyforhisname 2020-03-27 14:56:20 PDT 
As a temporary fix, I found that adding transform: translateX(0); to the main container will cause the items to show like normal
Comment 2 Radar WebKit Bug Importer 2020-03-27 16:58:02 PDT 
<rdar://problem/60991112>
Comment 3 Damon 2020-07-01 09:46:44 PDT 
Just adding that I also independently ran across this (Safari 13.1.1, macOS 10.15.5) with a replication here https://jsfiddle.net/dzucconi/fvxu4gc5/