iOS Safari may struggle to fully load a webpage on the first attempt

Our website functions perfectly on all browsers and devices, except for an issue that occurs only the first time it is opened on Safari mobile or Safari Mac with narrow screens.

Website:

To reproduce on iPhone Safari:

  1. Open the website in private mode
  2. Refresh the page

To reproduce on Safari for Mac:

  1. Open Safari in private mode
  2. Switch User Agent to iOS - iPhone ( Develop > User Agent > Safari -- iOS -- iPhone )
  3. Resize the browser window to simulate a mobile device width
  4. Open the website
  5. Refresh the page

Expected result: The page should render consistently each time it is loaded

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

Actual result: On the first load in private mode, only a green box appears Upon refreshing the page, the entire page renders correctly

https://i.sstatic.net/5bhJ5.png

Investigation: A comparison of the correct and broken renders showed no differences in HTML & CSS between the two.

If you inspect elements not displayed initially (but appear after refresh), there are no styles affecting visibility (e.g. opacity, display, visibility, position, etc).

UPDATE: An error in the Safari Console 

Unhandled Promise Rejection: [object DOMError]
may be causing this issue. Research suggests it could relate to auto-playing video on the page (although the video plays despite the error). Further investigation is needed to identify the root cause of this error.

We welcome any insights on why this behavior is specific to Safari.

htmlioscssmacossafari

Answer №1

Your website is facing numerous issues, as pointed out by other reviewers. The main culprit seems to be the excessively large size of your home page, causing some assets not to load in time due to priority being given to external scripts before CSS. The delayed loading of CSS on subsequent attempts occurs because it gets cached only after several JavaScript files are loaded beforehand. This ultimately affects user experience and site performance.

While I have many suggestions for improvement, I'll stick to addressing points relevant to your query:

  1. Ensure that your CSS is placed before any JavaScript in the header of your pages.
  2. Consider removing unnecessary scripts to improve site loading speed, especially on slower mobile devices where users may lose interest waiting for content.
  3. Check the console errors in Chrome's developer tools to fix any issues hindering your site from meeting standard compliance and search engine crawlability.
  4. Analyze your site using Google's PageSpeed Insights tool: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

Best of luck with optimizing your website!

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

JavaScript function to close mobile menu when menu item is clicked

https://i.sstatic.net/GfKem.png I have a dilemma with my HTML code. I am trying to figure out how to collapse the menu when clicking on a menu item using JavaScript. I have been stuck on this for two days now. Can anyone provide a solution with an explanat ...

javascripthtmlbootstrap-5

Issue with Element's Response to JQuery Click Event

After pulling elements from the database in PHP, I utilized Jquery to add Elements to the page. Each button has two classes; one for controlling the GUI and another for handling the click event of that specific button. Here is the code snippet: echo " ...

javascriptphpjqueryhtml

Ways to implement a delay in a function?

I'm looking for a way to introduce a delay in my function. Should I enclose the function within a delay function, or is there a different method to ensure that the animation doesn't trigger until 5 seconds after the page has loaded? var textTo ...

javascriptjqueryhtmlcss

Execute a function when the button is clicked

Currently in the process of learning HTML and Javascript. I was able to search online for information on how to navigate to a URL and extract a value from returned JSONP. However, the function is executing when I load the HTML page, and I would prefer it t ...

javascripthtml

Creating custom TableViewCell designs by creating your own Nib file and subclassing UITableViewCell

Recently, I created a subclass of UITableViewCell named MyCell and encountered an issue while trying to display the table. Every time I attempt to do so, I am faced with the error message: exception 'NSInternalInconsistencyException', reason: &a ...

iosuitableview

The background image of the div appears above the top menu

I am encountering a small bug in my code where everything looks fine on desktop, but when I switch to mobile screen, the layout bugs out and displays before another div class. On desktop, everything looks fine. I want to create a menu like this Here is t ...

htmlcss

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel

iPad is playing the incorrect file when using .play(). Any ideas on how to fix this issue?

Currently, I am developing a web application that involves a div element with dynamic text content that changes based on user interactions. To enhance the user experience, I decided to incorporate audio elements by creating an array containing correspondin ...

javascriptiosweb-applicationsaudio

Are there any special CSS hacks that only work for IE8?

When it comes to Internet Explorer 8 (IE8), my preference is to utilize the following CSS: color : green; I am looking to implement a hack that exclusively impacts IE8, without affecting IE9, IE6, and 7. ...

cssinternet-explorer-8conditional-comments

Utilizing jQuery for dynamic horizontal positioning of background images in CSS

Is there a way to set only the horizontal background property? I've tried using background-position-x and it works in Chrome, Safari, and IE, but not in Firefox or Opera. Additionally, I would like to dynamically set the left value of the position. ...

javascriptjqueryhtmlcss

Modify the background color of jQuery Datatables in your HTML code

Currently, I'm working with a jQuery plugin called datatables and have added some static rows. My goal is to customize one of these rows by giving it a specific background color. I've tried using the bgcolor property, but unfortunately, it seems ...

jqueryhtmldatatables

Proper Sequence of Bootstrap Header Configuration

I'm working on creating a header/navbar using bootstrap, but I'm unsure about the correct order and method to achieve this. This is how I want it to look: And when collapsed: Should everything be contained within the NAV tag? I have a header ...

htmltwitter-bootstrap-3navbar

Prevent a div from scrolling once it reaches the end of its content, while allowing the other div to continue

I am trying to make the col-md-4 column stop scrolling once it reaches the end of the content, similar to the right sidebar on Facebook. I have attempted using jQuery to add a fixed position when it reaches the bottom, but it is not working as expected. Th ...

htmlcsstwitter-bootstrap

Error: ReactJs unable to find location

I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...

javascripthtmlnode.jsreactjs

Manipulating attribute values using Jquery

Currently, I am attempting to switch the src value of an iframe when a link is clicked by replacing it with the href from that link. By preventing the default action upon clicking the button, I can successfully update the src value with the url provided. H ...

phpjqueryhtml

Tips for deleting an HTML row and removing an entry from a MySQL database through the use of AJAX

Utilizing a mix of HTML, PHP, Javascript, and AJAX, I am creating an HTML table populated from a MySQL database. The goal is to implement a functionality where a row can be removed from both the table and the database using a delete button. Here's wha ...

phpjqueryhtmlmysqlajax

Selected Angular Radio Button

Back in the good ole days of basic HTML and CSS, I was able to achieve the following: input:checked+label { background-color: #f00; } <div class="col-xs-6"> <input type="radio" id="template-1" name="template" value="template1" checked> ...

cssangular

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...

cssimagesvg

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line <span class="caret"></span> <ul> <li class="nav-item-1"> <a href="#">ITEM 1</a> <span class="caret"></span> ...

javascriptjqueryhtmlcss