Safari: align-items/justify-content ignored when flex container is button element

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.

MIT License

13.63k stars 495 forks source link

Safari: align-items/justify-content ignored when flex container is button element #236

Closed OliverJAsh closed 6 years ago

OliverJAsh commented 7 years ago

Not the same as https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Things to include in your issue:

Please include links to the bugs for each affected browser's bug tracker.

https://bugs.webkit.org/show_bug.cgi?id=169700

Please include a live demo (CodePen or JSBin) showing both the issue and the workaround.

Issue:

http://jsbin.com/dakutob/1/edit?html,css,output

Workaround:

Wrap button contents in another flex container http://jsbin.com/dakutob/2/edit?html,css,output
Please clearly explain exactly what the expected behavior is and what's not happening in the affected browser(s). It's not always immediately obvious from looking at a demo what is wrong.

The align-items and justify-content properties seems to be completely ignored when the flex container is a button.

philipwalton commented 6 years ago

Hmmm, is this fixed in Safari 11?

Since this is so similar to Flexbug 9 (the workarounds are exactly the same), if we determine this is still an issue I think it would make more sense to just add more detail to that bug and explain that the workaround is still recommended.

What do you think?

neo commented 6 years ago

Not anymore in 11, but still happens in 10, which is still quite popular?

OliverJAsh commented 6 years ago

I realised that the screenshot I linked to showing the issue was wrong. I've updated this now in the original post.

I can confirm this seems to be fixed on Safari 11.

I still think it's worth documenting though, for older Safari versions.

if we determine this is still an issue I think it would make more sense to just add more detail to that bug and explain that the workaround is still recommended.

Sounds good to me.

neo commented 6 years ago

@OliverJAsh agreed that it's still worth documenting.

philipwalton commented 6 years ago

Since it's been fixed in Safari 11 and the README states this, I think it's OK to close this issue. Users who read the table can easily infer that the workaround is still necessary if they want to support Safari 10.

OliverJAsh commented 6 years ago

I raised a PR to reference the fixed Safari issue: https://github.com/philipwalton/flexbugs/pull/245

This extra detail might be useful for older Safari users, considering the bug is not the same as the other linked Safari issue.

philipwalton commented 6 years ago

Thanks, merged!

cyan33 commented 6 years ago

Got the same issue in safari 10. Thanks for the workaround! @OliverJAsh 👍

PradnyaSahajrao commented 2 years ago

how to make flex and align-items works for IPAD air 4