ampproject / ampproject/amphtml

column-count property doesn't work on Safari

Open
#28,556 11 comments 0 reactions 0 assignees View on GitHub
Blocked P3: When Possible Stale Type: Bug
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
![Chrome](https://user-images.githubusercontent.com/1287721/82754271-d17f6180-9e06-11ea-9cf1-83590e88ce2f.png)

#### Safari
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.