General question about old Browser support

[Regnalf]

Hi theme.co and community!

I recently had a problem with a customer who said that the new website I created wasn’t working properly, or rather the appearance was wrong.

After more detailed research, I realised that the website was actually working without any problems, but the customer was using an iPhone SE with version 12.5.7! According to Apple info, even the security updates for this version were discontinued in 2023!

I know that you have an info in the documents for version compatibility, but they concern the minimum requirement for WordPress, PHP and MySQL.

So my question is old as webdesign itself:
How do you handle this at theme.co as far as support for older browsers should still be given?

I’m speaking for the Mac world, of course, because Android usually has better web standard compatibility thanks to the Chrome browser installed by default. But how far back should you go? If I take the Apple X-Code development environment, there is still simulator support down to 15.2.

Would that be an argument to convince customers that everything below that is simply no longer useful to support?

Another argument would be of course that version 12 will no longer appear on statcounter.com in the period from 2023 - 2024, so it’s heavily outdated and would only impact a handful of users, my customer included.

Let me know what you think about this.

Thanks.

[charlie]

Can you send over your site or page that is having issues? I went out of our way to get the JS working on iOS 12. I think there might be a CSS issue, this fixed the issue on our playground with off-canvas. I just want to confirm on your site. Have a great day.

.x-off-canvas {
  height: 100%;
}

[Regnalf]

Hello @charlie, thank you for taking a closer look. It’s related to the same issue that I have already posted in the forum:

Slider display issue in cornerstone editor showing multiple slides at ones

In the backend editor of cornerstone I have a strange display issue with a stacked slider. All slides are displayed at the same time. Only when scrolling through several times do they disappear and only one is displayed again. Fortunately, this display issue does not occur in the frontend! [screenshot_ 2024-01-23 um 08.25.11] pro version 6.4.9

But the issue only occurs in the backend of modern browsers, not in frontend. From iOS 15.2 onwards, there don’t seem to be any problems at least in the frontend, so I have accepted this. In iOS 12, however, this issue also appears in the frontend.

Cornerstone backend view of Component (even in the latest chrome browser):

iOS 12 Output (Real device screenshot from customer):

iOS 15.2 and above frontend view (X-Code Simulator Output)

It’s in the component “Topinfo”:

But to come back to the question of my post above, how far do you test functionality on older browsers? I would be interested to know purely for technical reasons.

Thanks

Update: I’ve change the slider from stack to inline. So the multiple text lines disapears, but the slider grows to big now.

[charlie]

I think it’s because we use where() and is() for effects in CSS. I’m not very hip to new CSS features, but I don’t think those are necessary so we’ll change that. You can probably get around this with the following custom CSS in your slide container element. I think the Preview issue in your other thread is something different, but it might also be similar. Thanks for the info have a great day.

$el .x-slide.x-effect-exit {
  opacity: 0;
}

:is() - CSS: Cascading Style Sheets | MDN

:where() - CSS: Cascading Style Sheets | MDN

[Regnalf]

Unfortunately I have another problem on this page which I have only just realised. This problem only occurs on Apple mobile devices.

It probably has something to do with the fact that 3 sliders are being used. On pages where no slider is used, everything is fine.

My iPhone 11 with iOS 17.4.1 (Crash with Safari and Chrome browser)

Login credentials are still active, and you can download a screen recording from the sliders.

[charlie]

I’d probably start disabling plugins and seeing if one of those is causing that, like editor plus. I can’t really recreate even with a large number of autoplay sliders. I noticed the homepage is doing a strange redirect thing too. Do you have any idea on that?

[Regnalf]

The question is, were you able to reproduce the error on the page I mentioned on one of your iPhones? Because on an iPad of mine or desktop Safari or Chrome it works without any problems! I can’t say about Android because I don’t own one.

And which redirect do you mean?

Maybe it has something to do with the api provider section?

[charlie]

I was able to reproduce on your site through browserstack. Just not on one of my sites doing something similar. On andriod it doesn’t crash. I’ll export your home page and see if I can dig a little more.

What do you mean by the provider section? The redirect might actually just be a symptom of the crash.

[Regnalf]

@charlie, thank you so much for looking at it again. I only stumbled across it myself by chance when I experienced it on my iPhone.

I’ve never seen anything like it on a Cornerstone site. But I noticed that the timing of the crash is quite close to the change of the third slider. This one has a different speed than the first two.

What I meant by the provider section was that just below the 3 sliders is another section that has an API provider with the feed from another website. But I have already tried omitting this part, but the crash still occurs.

It’s still a mystery to me.