iOS 7 users experiencing webpage crashes

UPDATE: Success! After some trial and error, I discovered that iOS 7 is not compatible with vh units. I switched to using JavaScript for detecting the browser height, and now my website works flawlessly on iOS 7.

I recently created a website that functions perfectly on all devices except iPhones running iOS 7. The entire page crashes and displays bizarre flickering effects like a disco party gone wrong.

You can witness the chaos on iOS 7 by clicking here:

If I remove my CSS file, the page loads normally without any styling.

*
{
margin: 0;
padding: 0;
}

<!-- More CSS code will go here... -->

#ops 
{ 
color: #000;
text-decoration: none;
}

#ops:visited
{
color: #000;
}

Answer №1

One solution to address the flickering issue is to consider removing CSS properties such as animation, transform, and perspective. By doing so, you may be able to determine if these properties are causing the problem. It's important to carefully analyze the scripting actions and element stacking in order to pinpoint the exact cause of the flicker.

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

Is it possible to still get Push Notifications on my mobile device if I remove the Authentication Key from my Apple Developer Account?

After setting up an authentication Key in my Apple Developer Account to enable push notifications for my iOS app, I utilized Firebase to send notifications by including a .p8 file and providing Team ID and Key ID. Currently, I am successfully receiving n ...

In Ajax, the initial value is displayed before the updated value

I am currently using Session::flash notifications (bootstrap toasts) to inform users about adding a product to the cart: @if(Session::has('add-product')) <div aria-live="polite" aria-atomic="true" class="d-flex justify ...

Tips for Minimizing DIV Space with the Flex Property

I need some help with reducing the space between the individual content (1, 2, 3, 4) and its border in this Fiddle. As a newcomer to Flexbox, I'm unsure if there's an easy solution to this issue. Here is a visual representation of what I mean: ...

Columns nested within tabs in Bootstrap4

My current layout is shown here: https://i.sstatic.net/vQsqz.jpg I am looking to incorporate nested columns within these tabs. My attempted solution so far has been unsuccessful. The issue I am facing is that the columns within the specific tabs are ove ...

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

What is the best method for displaying file size in a user-friendly format using Angular 6?

Imagine having this snippet in an HTML file: *ngFor="let cell of dateFormat(row)">{{cell | filesize}}</td>, where the dateFormat function looks like this: dateFormat(row:string){ var today = new Date(row[4]); let latest_date = this.date ...

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

Issue encountered when concealing page elements followed by revealing them again

My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is: $(document).ready(function() { $("#HomePage")[0].style.visibility = "visib ...

What are the steps to designing customizable drop-down content menus on websites?

I am looking to implement a feature where I can create content drop-down bars similar to the ones shown in the images. When a user clicks on the bar, the content should be displayed, and if clicked again, the drop-down should hide. I have searched for a so ...

JavaScript Cookie to Ensure Form Submission is Limited to a Single Instance

Seeking assistance with automatically submitting a form on page load using JS cookies. Here is the code I have, but it's not functioning as expected. Any guidance would be greatly appreciated. Thank you. I'm unsure about the section in my code th ...

Creating a custom dropdown behavior using Angular

I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...

Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it. Is there a way to prevent block overlapping using CSS? I have searched Stack O ...

Retrieve a collection of nested dictionaries containing flask and angular data

In my app development journey with flask and ionic(angular), I'm working on returning a JSON list. Here's the python code snippet: def get-stocks(): # Select all stocks cursor.execute("""SELECT * FROM `tbl_symbol_index`"" ...

Steps for transferring an SQL table's data using PHP

I'm facing an issue while attempting to display a table containing users' SQL data onto an HTML page. Let's assume that the connection is established and there is indeed information in the table. <?php echo "<table> &l ...

I am interested in utilizing CSS and R markdown for constructing css boxes while keeping the overall template unchanged. How can I achieve this?

Perhaps this is a simple question, but I am struggling to find a solution. I have created an "R markdown" document for teaching statistics, and I'm using a CSS file to customize the appearance of my questions. The CSS file I've included from here ...

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

Adjust the text within the treeview node for proper alignment

My treeview has nodes that display text, but when the length of the text increases, it moves to the next line and starts one place before the upper text, causing alignment issues. Is there a way to use CSS or JavaScript to properly align the text? Regards ...