Gutenberg: Blocks: Gallery block breaks under iOS 10.2 Safari

[shoetten]

Issue Overview

The new list based gallery markup introduced in d8eaefb81f103898a66ba2eaebd2057c255f7e7b breaks the layout in mobile Safari under (at least) iOS 10.2.
I'm using Gutenberg v2.2.0

The example post works, because it is using the now deprecated markup.

Steps to Reproduce (for bugs)

1. Add the example Gutenberg post to your WP installation
2. Navigate to the post in iOS Safari

Expected Behavior

Current Behavior

Possible Solution

Change the display type on the <li> element to block:

.wp-block-gallery .blocks-gallery-item {
    display: block;
}

I don't fully grasp all possible display options, but in my understanding this shouldn't break the layout, since the <figure> element has it's own display: flex, which takes care of the correct positioning of the caption.

[jorgefilipecosta]

Hi @shoetten thank you for reporting this issue. I did some tests and it looks like the gallery is not breaking anymore on iOS. If in your tests on the last version, you find that is not the case, feel free to comment and the issue will reopen and we will look further.

[laphilia]

Hi
I have the same issue but only on small screens and older versions of iOS.
That is on iPad (iOS10) and iPhone (iOS9).
On newer versions (iOS11) it works fine on both devices.

[miscs]

I see the same problem using iOS 10.3 and Gutenberg 2.8.0
Using iOS 11 it works.

One thing to add: this fix works for the images but not for image captions. these are still not correctly layouted.

[billerickson]

I'm seeing the same issue, iOS 10.3.3.

I think this should be patched, even if it currently works on iOS 11. Not everyone is running the most up-to-date OS.

[sundweathers]

Can this issue be reopened? Problem still exists with iOS10.3.3 and Gutenberg 3.6.2.
Older Ipads can't be updated to iOS 11 but are still used by many of my followers

[oldmankit]

The problem is that this degrades really poorly. Gallery images end up covering text making the page unusable for many users. Some people haven't updated to iOS 11 out of choice.

[oldmankit]

I'm attaching an image of a page that is basically broken by this bug. On every other browser I've tested it is a perfectly responsive page. The browser in question is Safari on iOS 10.2.1

[ruthmaude]

https://github.com/WordPress/gutenberg/issues/10150 - same issue reported here

[stevish-com]

I'm getting the same behavior on OSX with Safari 10.2

[scubarob78]

Hi,

I've the same issues with WP 5.0.3 standard gallery block on Ipad Mini iOS 9.3.5 (13G36) with the browsers: Safari, Opera Mini, Chrome

code:

`

• 

• 

• 

`

[slingshotdesign]

I'm seeing this issue also with iOS version 9.3.5 which apparently had very glitchy support for Flex. In my experience there are still a lot of old iPads around. They can't be upgraded and Chrome, Firefox and Edge cannot be installed on them because the OS is too old. I'm trying to figure out a solution and will report back if I find one.

[eduardozulian]

@slingshotdesign, perhaps trying some of the CSS workarounds in #10150 will help. :)

[brandonquinnsmith]

I'm seeing the same issue on iOS version 9.3.5 slingshotdesign. And the captions are also a mess as well.