ampproject / ampproject/amphtml
column-count property doesn't work on Safari
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## 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

#### 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
Contributor guide
Research direction
Start with the reproduction at https://shoho.github.io/column-count-test/index.html and compare the Safari and Chrome layouts. Inspect the `.i-amphtml-layout-size-defined { overflow: hidden!important; }` setting and determine a change that restores the intended `column-count` behavior in iOS Safari. Done means the reproduction works in Safari without regressing Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100