Section Cards on iOS 12

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
SamT
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Section Cards on iOS 12

Post by SamT »

Ths is a very particular issue and threfore, perhaps, of little use to you. Even so, I thought if it helps just one other person, I should publish it.

The new Section Cards has proven to be a great addition to WWB for some websites I build.
However, one particular website for the older person has shown an issue regarding Section Cards with background images and shapes on iOS 12.

TLDR: If you want to use a Shape or Shape with a background image in a Section Card that is visible on the legacy iOS Safari browser, it does not show on the website.

As a work around use a vector image app to create both the shape and if needed a different shape with a background image and then export the elements as a group to SVG. On the Section Card, import the Image and use the SVG file. Scale as required.

Explanation
A client wanted a website for its ~650 older person members. A significant proportion (13%) use an older iPad from iOS 12 upward.
It appears the SVG generated Shape in the Sections Cards fail to display on the older devices browser.
The same occurs for an SVG shape with a background image.

On investigation, this is caused by a known issue in Safari where the height of the SVG is set to 0 and will not display.
On Windows and Android the SVG displays correctly despite height: 0 in CSS.
Using (for example) CSS height: 320px !important; allows the shape to be displayed in Safari but distorts in Windows and Android.
As a result, the work around, as above, solves this issue.
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Section Cards on iOS 12

Post by Pablo »

The reason why it does not work on iOS 12, is because section shapes use 'clip-path' which is only supported by modern browsers.
Post Reply