column-count property doesn't work on Safari

What’s the issue?

In iOS Safari, column-count property doesn’t work as intended because of the conflict with the following css setting. It’s working as expected on Google Chrome.

.i-amphtml-layout-size-defined {overflow: hidden!important;}

Screenshot

Google Chrome

Chrome

Safari

How do we reproduce the issue?

https://shoho.github.io/column-count-test/index.html

What browsers are affected?

Safari only

Which AMP version is affected?

2005151844001

Issue Analytics

State:
Created 3 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

3reactions

b0ndtcommented, Jun 9, 2020

Adding will-change: transform; to the img elements will fix this behavior.

0reactions

stale[bot]commented, Aug 12, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

Top Results From Across the Web

column-count property is not working properly in safari and ...

The main div is assigend with a property called column-count=2 and things are working absolutely fine in Chrome.But when we are testing this ......

"column-count" | Can I use... Support tables for HTML5, CSS3 ...

1 Before version 37, multiple columns didn't work with display: table-caption elements. Support data for this feature provided by: MDN browser-compat-data.

CSS column-count property - W3Schools

The column-count property specifies the number of columns an element should be divided into. Show demo ❯. Default value: auto. Inherited: no. Animatable:...

Safari Technology Preview Release Notes - Apple Developer

Note: Tab Groups do not sync in this release. Web Inspector. Elements. Added CSS keyword completions for standard logical properties (r280588). Console. Fixed ......

column-width - CSS: Cascading Style Sheets - MDN Web Docs

Especially in the presence of the column-count property (which has ... Report problems with this compatibility data on GitHub ... SafariNo.