Section Cards on iOS 12
Posted: Tue Jun 06, 2023 3:24 pm
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.
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.