Broken row layouts on older iPad / iOS Safari

Sebastian
(@imcube7)

4 years, 4 months ago

Hi!

There seems to be a problem with row layouts and animated content when viewing a site on an older iPad / in an older iOS Safari browser.
I opened one of the “Built with Kadence Blocks” sites (https://parsey.com/) on an Apple iPad 3 with the “latest” iOS 9.3.6.
If you scroll down to the “See It In Action” section you’ll see that this section with the icon list animation inside is completely broken and overlapping the following rows.
If you then scroll further down to the testimonial section, the layouts of all the testimonial cards are broken too. As this section also features animated elements inside, this may be a source of the problem.

On the other hand, all layouts on https://evidence.io/ inside the ‘THE PERFECT NOTIFICATION FOR ANY SCENARIO’ section are broken too, overlapping each other. These sections don’t seem to have animations inside, so maybe it’s not connected to the animation.

I don’t know if you have the possibility to test these sites on the mentioned device, but I think it would be good to look into this. The device is old but I’m sure there are still a lot of them in use for browsing websites.

Sebastian

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Ben Ritner – Kadence WP
(@britner)

4 years, 4 months ago

Hey,
Thanks for posting about this, Can you tell me what version of safari is on that version of IOS? I’m trying to see if I can recreate so I can see what you mean.

Ben

Thread Starter Sebastian
(@imcube7)

4 years, 4 months ago

The Safari version corresponds to the iOS version.
Since it’s iOS 9.3.6 the Safari version should be 9.0

Here’s the exact user agent info:
Mozilla/5.0 (iPad; CPU OS 9_3_6 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G37 Safari/601.1

Plugin Author Ben Ritner – Kadence WP
(@britner)

4 years, 4 months ago

ok, That looks like it’s a version before support for css flexbox. From what I can see the usage is less then IE9.

I’ll considering adding some basic fallback so that it doesn’t appear broken if that can be added light weight.

Ben

ahorndesign
(@ahorndesign)

4 years, 3 months ago

@britner I want to second this and give some details. The problem affects the height of columns and row elements on Safari in iOS versions < 10. Flexbox is supported on these browsers. For the moment it looks like a problem with the default value of flex-shrink, I will do some more testing and report if I find out more specifics.
Plugin Author Ben Ritner – Kadence WP
(@britner)

4 years, 3 months ago
If you have a good way to test on those really old safari versions can you add this code to your site and test:
```
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .kt-row-layout-equal>.wp-block-kadence-column {
width:auto;
}
}}
```
Ben
ahorndesign
(@ahorndesign)

4 years, 3 months ago
Thanks, @britner – the solution you proposed did not work out of the box (also – is the nested media query intentional?). What did resolve it was setting the display property of the kt-inside-inner-col class to flex and giving it a flex-grow value:
```
.kt-inside-inner-col {  
  flex: 1;  
}
```
Maybe simply adding “width: 100%” would have helped as well.

I use browserstack to test with these old versions.

Yavor
Plugin Author Ben Ritner – Kadence WP
(@britner)

4 years, 3 months ago

ok, so in browser stack are you going back to safari 8? Yosemite or Ipad air 2 (8 as well)

The media query targets old safari browsers only.

Ben

ahorndesign
(@ahorndesign)

4 years, 3 months ago

You will see the problem on Safari for iOS 8 and 9, both on iPads and iPhones.

Plugin Author Ben Ritner – Kadence WP
(@britner)

4 years, 3 months ago

I pushed an update out and changed how the auto prefixer was working, I think that will add whats needed.

Ben

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Broken row layouts on older iPad / iOS Safari’ is closed to new replies.

Tags