What steps can I take to fix the issues on Safari that are being caused by three js on my website?

For my friend's birthday, I decided to surprise him by creating a web page for his online radio station. Being new to JavaScript, it was a great learning opportunity for me. After much experimenting, I finally got the page to work smoothly on desktop and mobile devices. However, my oversight in testing on iPhones led to a major issue when I presented the page to him yesterday!

To address this error, I created a free account on Browserstack to identify the errors occurring specifically on Safari. While I now know what is causing the problems, I'm stuck on how to fix them.

If you'd like to take a look at the page in question, here is the link:

The website in question

First, let's take a look at the code and then further down are the errors encountered:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> The Hatch Radio Station </title>
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <style>
            body {
                margin: 0;
                overflow: hidden;
                display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                            ...
                            ...
</html>

https://i.sstatic.net/SAQkr.png

https://i.sstatic.net/cskt0.png

Answer №1

If you find yourself adding 35 point lights to your scene, keep in mind that each light source requires a certain number of uniforms. Therefore, it's no surprise when the error message too many uniforms appears.

To address this issue, it is advisable to reduce the number of point lights. Additionally, consider using BoxBufferGeometry instead of BoxGeometry as it can improve the startup time of your application and lower memory usage.

Furthermore, opt for using requestAnimationFrame() to manage your animation loop rather than setInterval(), which is considered poor practice.

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

Tap to navigate to queued sections on click

Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query. Just a heads up - I am a novice when it comes to javascript and jQuery. My question pertains to incorporating two image buttons that, upon cli ...

The image I want to show is invisible on the CSS custom radio button

I'm having trouble creating a custom radio button that displays the image I want. The current setup doesn't seem to be working as expected. label { font-weight: lighter; cursor:pointer; } input[type="radio"] { display:none; } in ...

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

AngularJS allows you to dynamically disable a button based on a value in an array

I have an array containing letters from A to Z and I want to create a list of buttons using them. $scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split(""); I also have another array: $scope.uniqChar = ['a', ' ...

Creating an image and video slider using bootstrap techniques

Currently, I am attempting to create an image and video slider using bootstrap. However, the slider I have created is not functioning as expected. For instance, the slider is not pausing for videos, and the videos are not autoplaying. I attempted to sear ...

Cannot locate AngularJS + Typescript controller

I'm encountering an error while attempting to integrate TypeScript with AngularJS. The issue I'm facing is: Error: [$controller:ctrlreg] The controller named 'MyController' has not been registered Does anyone have any insights on what ...

Exploring the features of React.js version 16

I'm confused about what {...props} does. I know it makes passing props easier, but what happens if there are no props to begin with? Take this example: const input = (props) => { let inputElement = null; switch(props.inputtype) { ...

Print directly without the need for a preview or dialog box

Is there a way to easily print content with just one click, without having to go through the preview or print dialog box? Here is a snippet of my code: <head> <style type="text/css"> #printable { display: none; } @media print { #non-pr ...

Having problems with loading @font-face in Ionic Framework Android app build?

While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...

Exploring the power of Jasmine with multiple spy functionalities

I'm currently working on writing unit tests for an Angular application using Jasmine, specifically focusing on testing different scenarios within a function. The main challenge I am facing is structuring the test to accommodate various conditions such ...

Struggle with encoding dropdown menu options

I have multiple forms on my webpage and I want to be able to access them all at once and include them in a single large GET request. It's mostly working, but I'm encountering difficulties when dealing with drop down menus because their structure ...

Is using $timeout still considered the most efficient method for waiting on an Angular directive template to load?

When it comes to waiting for a directive's template to render, our team has been following the approach of enclosing our DOM manipulation code in a $timeout within the directive's link function. This method was commonly used in the past, but I&ap ...

Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...

Adding schemas to the router of a Next.js 13 app is a helpful feature that can

Summary: In Next.js 13, the /app router's new changes to layout and page routing have altered how we add content to the <head>. The challenge now is how to include a schema script on each page. Next.js automatically combines <head> tags f ...

What is the inner workings of runtime environments?

I'm struggling to grasp the concept of a runtime environment. I understand that it acts as a virtual machine on top of an operating system, enabling applications to run seamlessly across different platforms. However, I'm puzzled by the mechanics ...

Issue with Bootstrap tabs not updating content on multiple clicks

Recently, I have been experimenting with implementing tabs on one of my webpage. Here is the code snippet I have been working with. <div class="row justify-content-between"> <div class="col-lg-3"> <a class="nav-link p-3 mb-2 sid ...

The error message "Undefined is not a function (near '...item.map...') keeps popping up when I try to use a React Native search

I encountered an issue stating "Undefined is not a function (near '...item.map...'). I have a dataset named recipes, and my intention is to filter through this data and display it when searched for. The problem occurs whenever I input text in the ...

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

How can we rearrange the newly added row from onRowAdd in Material Table to be displayed at the beginning of the section?

Title. According to the documentation for material table, when using editable with onRowAdd, the new row is always added at the bottom of the section. Is there a way to have it appear at the top instead? Alternatively, how can I add an onClick effect so t ...