What could be causing my Squarespace animation to function properly in Chrome but not in Safari?

I successfully implemented a typewriter animation on my Squarespace website using a Code Block and HTML code. It seems to be functioning well on Google Chrome but is not working on Safari. I recall reading that 'transform' may require additional code to function properly on Squarespace, but I did not utilize that feature. I have searched the forums for solutions to this issue but have not found any helpful information. What could I approach differently to resolve this issue? If anyone can provide a link to a solution that has worked for them in the past, it would be greatly appreciated.

Furthermore, if you have any tips on enhancing the code, I am open to suggestions as I am relatively new to web design.

.typewriter {
  align-items: center;

  font-size: 350%;
  font-family: "DIN Bold", sans-serif;
  text-align: center;
}

.typewriter:after {
  content: " " ;

  color: #ea746a;

  animation: write 15s infinite linear;

  animation-fill-mode: forwards;
}

@keyframes write {
  1% {
    content: "A";
  }
  2% {
    content: "AE";
  }
  ...
  91% {
    content: " ";
  }
}
<div class="typewriter">
  TRANSFORM YOUR BRAND THROUGH
  <span>
    <br />
  </span>
</div>

Answer №1

The issue lies with Safari's current inability to support animated content in pseudo elements, causing the typewriter-like banner to remain static.

However, it is still possible to achieve the typewriter effect of characters appearing one by one without using JavaScript. This method can be challenging to implement with a non-typewriter font, requiring calculations even with a fixed-width font.

To overcome this challenge with a typewriter font, a solution is proposed here. By leveraging before and after pseudo elements on a div, the banner can be written progressively, while hiding unwanted characters. Two animations are used: one for writing on the after pseudo element and one for writing before on the before pseudo element.

The colors are used to represent different elements - green for before pseudo element, red for after pseudo element, and blue for the div itself.

The keyframes are extensive, dynamically created to handle the animation. It is advised to have a script in place, whether in JS or PHP, to make banner content modifications easier without recalculating keyframes manually.

div.typewriter {
  position: relative;
  font-size:350%;
  font-family:'DIN Bold',serif;
  align-items:center;
  text-align: center;
  padding-bottom:2em;
  width: 100%;
}

div.typewriterinner {
  text-align: left;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: #ea746a;
  }
  
div.typewriterinner:before, div.typewriterinner:after {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  font-family: Courier, monospace;
  animation: write 15s infinite linear;
  background-color: white;
  }
  
div.typewriterinner:before {
  content: ' ';
  animation-name: writebefore;
  width: 50%;
  height: 1em;
  z-index: 2;
  }
  
div.typewriterinner:after {
  content: 'AESTHETICS.CONTENT CREATION.DIGITAL MARKETING.WEB DESIGN.';
  z-index: 1;
  overflow-x: hidden;
  white-space: nowrap;
} 
@media screen and (max-width: 767px) {
  div.typewriterinner:before, div.typewriterinner:after {
    font-size: 6vw; /* just to get one one line - this needs more thought - what do we want to happen? */
  }
}
@keyframes writebefore {0% { margin-left: -0ch;}0.01% { margin-left: -0.5ch;}0.8771929824561403% { margin-left: -0.5ch;}0.8871929824561403% { margin-left: -1ch;}1.7543859649122806% { margin-left: -1ch;}1.7643859649122806% { margin-left: -1.5ch;}2.631578947368421% { margin-left: -1.5ch;}2.6415789473684206% { margin-left: -2ch;}3.508771929824561% { margin-left: -2ch;}3.518771929824561% { margin-left: -2.5ch;}4.385964912280701% { margin-left: -2.5ch;}4.395964912280701% { margin-left: -3ch;}5.263157894736842% { margin-left: -3ch;}5.273157894736841% { margin-left: -3.5ch;}6.140350877192982% { margin-left: -3.5ch;}6.150350877192982% { margin-left: -...
<div class="typewriter">TRANSFORM YOUR BRAND THROUGH<br>
  <div class="typewriterinner"></div>
</div>

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

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

handling a radius variable across various stylesheets in SASS

Recently, I started using SASS and I am very impressed with this tool. However, before diving in further, I have one question that I can't seem to find the answer to. What is the best approach for managing a variable value across multiple style sheet ...

What is the process for allowing right-click to open in a new tab, while left-clicking redirects to a new page in the current tab?

In my project, I have implemented a multi-page form for users to input information. The left side menu contains items that allow users to switch between different pages while filling out the form. Currently, clicking on any of these items redirects the use ...

I desire for both my title and navigation bar to share a common border-bottom

As I embark on my journey into the world of HTML and CSS, my knowledge is still limited. Despite trying various solutions from similar queries, none seem to resolve my specific issue. What I yearn for is to have both my title and navigation bar share the s ...

Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to a ...

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

The desired outcome is not displayed following the Ajax post request

I have created an app that utilizes asynchronous AJAX requests to enable seamless chat functionality without refreshing the page. However, I'm facing an issue where the messages are not being displayed. When I inspect the network tab and navigate to t ...

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

Angular JS Profile Grid: Discover the power of Angular JS

I came across an interesting example that caught my attention: http://www.bootply.com/fzLrwL73pd This particular example utilizes the randomUser API to generate random user data and images. I would like to create something similar, but with manually ente ...

Troubleshooting Issue with Custom WordPress Post Type and Function Not Showing Images or Post Information

Having trouble getting attachments from this particular post type to display within the function below. Instead of the URLs being set, blank boxes are showing up. I've been trying to make this function appear on the homepage, but I keep facing the sam ...

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element

Hey everyone, I've come across an issue with using next/link in my code. Every time I replace the anchor tag with the "Link" tag, I encounter an error. I've searched for a solution but haven't found one yet. Any help would be greatly appreci ...

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

Populate a MySql database with 2 input values

I am facing an issue with inserting values into MySql from a table. When trying to insert two values, only one gets stored in the database and the other remains empty. Here is the structure of my MySql table: https://i.sstatic.net/yWLbO.png Below is the ...

Using Ajax to update multiple text field rows with unique values

I have a question regarding utilizing Ajax to update the second text field based on the input from the first text field. I am looking to create multiple rows using a for loop, with each row having its own set of values. HTML <form style="text-align:c ...

Both Fluid and Fixed layouts offer different advantages and disadvantages for website

Is there a way to position two divs side by side, where one div is 75% width and the other is 25% width? Additionally, can we place another div on top with margin:0 auto; to center the content of the page with a width of 986px? Here is an example code sni ...

What is the best way to apply CSS hover effects to specific cells within a table?

Is there a way to selectively apply CSS hover effects to only specific cells in a table? And can I disable it on the cells where I don't want it? td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-styl ...

Switching up the image using a dropdown selection menu

I am struggling with updating an image based on the selection made in a dropdown menu. I am quite new to javascript, so I believe there might be a simple issue that I am overlooking. Here is my attempt at doing this: JS: <script type="text/javascript" ...

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...