CSS mysteriously malfunctions on certain iPhones

Key Concept

Despite testing with responsive simulators and ensuring there were no issues, some iPhone users have reported problems with the style of my web page.

Coding Essentials

The page is designed to use 2 custom CSS files - one for screens larger than 960px and another for smaller screens (<=960px).

One important meta tag used on the page is:

<meta name="viewport" content="width=device-width, initial-scale=1">

Here is the page I am testing.

Testing and Outcome

Testing on various browsers resulted in no issues with small screen sizes down to 260px width. The CSS has also been validated here.

However, some users have reported display issues specifically on new iPhone 6 browsers (both Safari and Chrome show the same problem). This issue does not seem to affect other phone models.

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

htmliosiphonecss

Answer №1

Regarding the comments made by others about the 150% width: There seems to be some JavaScript code in js_compressed.js that is responsible for setting this width... It appears to be compressed, making it challenging to understand its purpose. However, when pretty-printed in Chrome Devtools, it looks something like this:

b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));

Following this code, there are some references to FancyBox (here, I assume)... Perhaps there is a connection between the two?

Answer №2

Are your header and footer both set to a width of 150%? This could be the reason why your page is not displaying correctly. Having a wider section than the main content area can cause issues with the layout of your site.

I recommend removing the fixed width of 150%; instead, consider using a max-width of 100% for better compatibility.

Answer №3

Without a specific code snippet to pinpoint the issue, it's challenging to determine which part of your code is causing the problem. Thus, I cannot provide a direct answer to your question. While I haven't encountered this issue on my own devices, I do have some suggestions for you to consider.

Take a look at this Stack Overflow post, particularly the first answer which outlines all the necessary hacks for the iOS Safari browser. Hopefully, these suggestions will help resolve your issue :)

Answer №4

It is recommended to

#top_block_wrapper, #secondary_block{
    display: block;
}

Use display: table-cell instead

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

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

What is the best way to reset the selected option in Vue.js when clicking on a (x) button?

Is there a way to create a function or button specifically for clearing select option fields? I attempted using <input type="reset" value="x" /> However, when I clear one field, all fields end up getting cleared. Should I provide my code that incl ...

javascripthtmlvue.js

Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks. HTML: <div id="outer_footer_bottom"> <div class=" ...

htmlcss

Messaging in the clouds through cloud functions

What is the usage rate for sending notifications to multiple iOS devices using Firebase Cloud Function? I am looking to send notifications to multiple users using their FCM token and name. For instance, Title: Hello (Name) ...

iosfirebasegoogle-cloud-functionsgoogle-cloud-messaging

The constricted styles are causing the whole page to bounce (scroll) up and down

On my SPA frontend, I have a parent div with a height of 580 containing 9 smaller divs (about 190px in height each). The parent div has an overflow set to hidden so that only 3 elements are visible at one time. Every 5 seconds, I change the styles by addin ...

javascriptcssvue.jsvuejs2

Fade in and out on button press

There is a button with the following HTML code: <input type="submit" id="btnApply" name="btnApply" value="Apply"/> Upon clicking the button, a div should be displayed. <div> Thanks for applying </div> The display of the div should fade ...

javascripthtml

Bootstrap 4 Multinav Navigation with Adjusted Z-index

Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...

htmlsassbootstrap-4z-index

Incorporating headers and footers on every page

I am looking to incorporate a header and footer on all my pages. I attempted to do this using jQuery, but unfortunately, it was unsuccessful. Since I am using nodeJS on the backend, do you have any recommendations for implementing this without causing an ...

htmlnode.js

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

javascripthtmlnode.jsexpresshandlebars.js

Substitute the website address using regular expressions

Looking to update the iframe URL by changing autoplay=1 to autoplay=0 using regular expressions. jQuery(document).ready(function($){ $('.playButton').click(function(){ $('.flex-active-slide iframe').contents().f ...

javascriptjqueryhtmlregex

Incomplete width allocation for the floating div positioned to the left

I've encountered an issue with the placement of the side-text div in relation to the image. Currently, without specifying the width of the side-text div, it automatically moves to the bottom. To address this problem, I attempted using display:inline- ...

htmlcss

Tips for adjusting the color of multiple <a> tags?

One issue I am facing is the color of the .row a element impacting my contact link, making it white. Despite attempting to change it to red, the color remains unchanged, but upon hovering it turns green. .row a { color: white; text-decoration: non ...

htmlcss

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

htmlcss

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

The use of "runat="server" in the HTML Head tag is preventing C# embedded code blocks from being converted to client-side code

After I included runat="server" in the head tag and added a CSS href with the value of <%= WebAppInstance %>, I noticed that the <%= WebAppInstance %> was not being converted to client-side code. To provide clarity on my question, please refer ...

c#htmlcssrunatserver

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

javascriptcssangularjshtml

Is it possible to monitor a section of a webpage's source code for any updates and notify about them?

This question may seem a bit confusing, but I am in need of some guidance. I do not require any code to be written for me, but rather assistance in finding the right direction to achieve my goal. The task at hand is to monitor a specific area of a web page ...

htmlautomationconsoleweb-scraping