Safari experiencing issues running Svg animations

We are currently developing a web application using React with SVG animations. While our SVG animations work perfectly on desktop and Android browsers, they do not animate on iOS devices (specifically tested on Safari on iPhone 5s, 8, and MacBook Pro).

const AnimationFooter = styled.div`
  margin-top: -18rem;
  height: auto;
  width: 100%;
  position: relative;

  @media (max-width: 420px) {
    margin-top: -15rem;
  }
  @media (max-width: 360px) {
    margin-top: -14rem;
  }
`;

const Im = styled.img`
  width: 100%;
  height: auto;
  /* -webkit-transform: translateZ(0); */

  @media (max-width: 420px) {
    margin-top: 6px;
  }
`;

<div>
   <AnimationFooter>
            <Im src="../static/images/home-image-ground.svg" />
     </AnimationFooter>
</div>
htmlcssreactjssafari

Answer №1

Give this method a try.

 const AnimalTabs = styled.div`
     .react-tabs__tab {
       width: 200px;
       margin-left: 30px;
       margin-right: -30px;
       border-color: #777777;
       border-width: 1px 1px 1px 1px;
       border-radius: 12px 12px 0 0;
       background-color: #777777;
       color: #ffffff;
     }

     .react-tabs__tab--selected {
       background-color: #ffffff;
       color: #777777;
     }

     .react-tabs__tab--selected :before,
     .react-tabs__tab--selected :after {
       position: absolute;
       bottom: -1px;
       width: 14px;
       height: 17px;
       content: ' ';
     }

     .react-tabs__tab--selected :after,
     .react-tabs__tab--selected :before {
       border: 1px solid #777777;
     }
     .react-tabs__tab--selected :before {
       left: -16px;
       margin-bottom: 1px;
       border-bottom-right-radius: 15px;
       border-width: 0 1px 1px 0;
       box-shadow: 6px 8px 0 #ffffff;
     }
     .react-tabs__tab--selected :after {
       right: -16px;
       margin-bottom: 1px;
       border-bottom-left-radius: 15px;
       border-width: 0 0 1px 1px;
       box-shadow: -5px 4px 0px 3px #ffffff;
       z-index: 10
     }
    `;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to combine a navbar with a video background?

Recently, I delved into Bootstrap and attempted to execute a code for a navbar with a video background. This is what my attempt looked like: HTML Code: <html> <head> <title>Medical</title> <meta charset="UTF-8&qu ...

htmlcssbootstrap-4backgroundnav

Updating the Background Color of a Selected Checkbox in HTML

I have a straightforward question that I've been struggling to find a simple answer for. Can anyone help me with this? Here's the checkbox code I'm working with: <input type="checkbox"> All I want to do is change the backgr ...

javascripthtmljquerycssweb

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

javascripthtmlcsstypescriptsaas

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

htmlcssangularprimengfieldset

Enhancing nvd3 Visualizations

Having some difficulty styling this nvd3 line chart. Despite getting most of it to look how I want, the tight margin between the y-axis labels and the chart is driving me mad. I managed to adjust the x-axis labels with negative line-spacing, but that trick ...

csssvgnvd3.js

Stop the jQuery custom slide animation when there are no more items to display

I have designed a unique slider for users to view the work process https://i.sstatic.net/FLYne.png When a user clicks the button, the slider will move left or right depending on the button clicked. However, if the user clicks multiple times, the slider ma ...

javascripthtmljquerycss

Tips for aligning a container or item at the center of a complex grid using Material UI

Click here for the CodeSandbox project I'm facing a challenge with aligning the Avatar and Typography components perfectly in the center of the left section of the Paper component. Upon inspecting it with DevTools, I discovered that the item/containe ...

reactjsmaterial-ui

Error: 'require is not defined' pops up while trying to import into App.js for a React App built with CDN links

My latest project involves a React App that showcases an h1 tag saying "Hello World" on the browser. Rather than utilizing npm, I have opted for CDN links to set up the application. The structure of the App consists of three key files: An index.html file ...

javascripthtmlreactjsbabeljs

Changing icons in a jQuery list

Having an issue with a multi-tiered drop-down list where clicking on a second tier child changes the icons of both children. Here is a complete setup on this fiddle : http://jsfiddle.net/Gwbfd/3/ $(document).ready(function(){ $('.drawer').hide( ...

jquerylistdynamichtml

Unable to update state in my React app when clicking on a button

There is a requirement for a button click to filter the job-card array by one specific category. For example, clicking on the button "Marketing" should only show jobs from the array that have the property "jobstags: Marketing". I followed a similar procedu ...

javascriptarraysreactjsstate

Update depth has exceeded the limit, the useEffect in React is causing issues

I encountered a strange error while working with the component below. The error seems to occur only when I make changes to the file, like altering a default prop, and then saving the file. I believe the issue stems from the props triggering a re-render, as ...

javascriptreactjsreact-hooks

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

javascripthtmlcssweb-applicationsvue.js

Alter the dimensions and material displayed on Vue

In my Vue.js project, I have a topbar with two divs whose size and content need to be adjusted based on whether the user is logged in. If they are not logged in, it should look like this: <div id='search' width="400px"></div><div ...

htmlcssvue.jsvuejs2

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

Issue encountered while setting up AWS as the backend and installing Amplify libraries

Currently delving into backend development, I've embarked on creating a To-Do app in React and decided to set up Amazon AWS for the backend. Following this site as my reference ( ). However, upon reaching the step labeled Install Amplify libraries, ...

reactjsamazon-web-servicesnpmaws-amplify

Strip certain tags from HTML without including iframes

Removing specific tags from HTML can be tricky, especially when working with PHP and JavaScript. One approach is to fetch an HTML page in a PHP file using curl and getJSON, storing the result in a .js file. However, this method may encounter issues with mu ...

phpjavascriptjqueryhtmlregex

The CSS content property within a style element prevents the dragging of elements

Is it possible to make an element with content draggable in HTML while changing the image through replacing the style of the element? I am trying to insert a picture using the content style tag, but it seems to make the element lose its draggable ability. ...

htmlcssdrag-and-dropdraggable

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

Enhancing the Angular Currency Pipe to display zeros after the decimal point

Using Angular has strict requirements for displaying full numbers received from the backend. In some cases, like with "123.450" and "123.45," the amount may be the same but clients prefer to see the complete number. <td>{{ material.customerPrice | ...

htmlangularangular-pipe