Bug 209681 - CSS Columns child items hidden when relatively positioned
Summary: CSS Columns child items hidden when relatively positioned
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-03-27 14:50 PDT by onlyforhisname
Modified: 2020-07-01 09:46 PDT (History)
4 users (show)

See Also:

Attachments
Shows the column bug occurring with the minimum amount of css (17.63 KB, application/zip)
2020-03-27 14:50 PDT, onlyforhisname 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

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