CSS3 columns - invisible elements in non-first column

• Component: CSS
• Status: RESOLVED FIXED

[Simmo Saan]

I have a bootstrap page in which I make use of CSS3 columns: https://sim642.github.io/FLL-scorer/. These panels contain bootstrap radio button groups.

When viewing this page on a wide enough screen to cause it to activate the multi-column layout, the button groups turn invisible but still exist in inspector. When forcing a single column layout they show up as intended. On iOS Safari I noticed them being broken a bit differently: some of the panel content would show up fully, some would be invisible, even the text.

The problem is that elements seem to randomly turn invisible in columns which are not the first.

[Simmo Saan]

Created attachment 268574 [details]
Screenshot of the page in question

[Radar WebKit Bug Importer]

<rdar://problem/24111946>

[Dave Hyatt]

Created attachment 269468 [details]
Patch

[Dean Jackson]

Comment on attachment 269468 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=269468&action=review

> Source/WebCore/ChangeLog:19
> +        Make sure the crawl up the containing block chain to apply clips properly offsets
> +        to account for columns. convertToLayerCoords could already handle this, so
> +        offsetFromAncestor now takes the same extra argument (whether or not to adjust for
> +        columns) that convertToLayerCoords does.

This bit usually goes before the list of files.

> LayoutTests/fast/multicol/border-radius-overflow-columns.html:12
> +            -webkit-columns: 2;

Don't need this any more.

[Dave Hyatt]

Fixed in r195453.

[Simon Fraser (smfr)]

*** Bug 155823 has been marked as a duplicate of this bug. ***