Hi there, inline SVGs are working great, however I’ve set the background of a bloc with an animated SVG only it won’t play on iPad Safari. It works great on Android devices and desktop Safari and every other browser on desktop Chrome, Firefox and Edge.
The way I’ve added it to background is to add to Asset Manager and then add to background image drop zone in the default bloc options. As an inline SVG on a page plays fine on every browser and device, set as background plays on every browser device except for iPad Safari.
Just wondering if anyone has any ideas what could prevent play when set as a background or whether there is any other way to assign to a background of a bloc without using the standard options?
I’m wondering if it is due to being called externally with it being called from the Asset Manager possibly.
Hi @SpookyDoo
Issues with SVG animations are known for the iPad. It’s related to the way Safari works and also its accessibility handling. For the latter, if the visitor has enabled the ‘Reduce Motion accessibility settings’ then it’s a waste of time.
Concerning the specific operation of Safari on the iPad, it’s as obscure as its cache management… in your place I would try to integrate the SVG directly into the code as a background image with XML (or base64) encoding. If that doesn’t work then I would try to use the SVG as an “inline” element rather than in the background with a “div” in an “absolute” position to simulate a background. Hope that helps.
I’m taking advantage of my response to completely complain about Safari, it’s more and more unbearable with each Apple update, whether it’s for its “bizarre” cache management or its “choices” to display or not this or that thing. Obviously we can do like everyone else and switch to Chrome but for Apple users it’s starting to get “strange” to be polite.
My sentiment too, I try to always look at things with the glass half full and not be too cynical, but iPad/Safari shouldn’t work (or be designed to work) differently to every other browser creating a deign for web then factor in design for iPad/Safari.
Thanks for tips I really appreciate that, last night I tried every permutation, classes, external CSS and a range of other things and have conceded to the fact that I will either have to redsign my SVG so that background and foreground are all one foreground inline SVG with my hero content link buttons being on a positioned element with higher Z Index or do something along the lines you have suggested.
When trying to create a a positional background with a class I did notice in the rules that the instruction tags an SVG background as an image, I’m wondering if that affects the SVG, that it will only call it in as a static image?
@Norm does that make any sense? If so as a wishlist would it be possible to add inline SVG as a background element in Blocs?
Hi @SpookyDoo, I understand your frustration with iPad Safari. Try adding the SVG directly in the code as an inline element, or use base64 encoding for the background. Hopefully, Blocs will make working with inline SVGs easier in the future. Good luck
Thanks @Vilashneha I’ll give that a try, I have been trying to some extent, but I don’t think I’ve been getting the code right, I’ll try enlisting Chat GPT to help me write the code. Thanks for the tip on Base 64, I will have a look in to that.