Issue with .css left/right in Safari iOS 9.0.2 causing jQuery bug

My header navigation menu has various menus, and on mobile devices, the menu slides to the left or right when navigating through submenus. Everything was working perfectly until the recent iOS upgrade to 9.0.2. Now, at this specific line of code:

menu.css({left: -(100 * positionVariable)) + '%'});

something strange happens: the body shrinks to half its size and the child menu slides in from the far right side of the page instead of smoothly transitioning. Whenever I switch to another submenu, the page halves again. Here's how it appears during the slide:

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

The child menu moves into place as expected, but the body remains distorted.

I've also noticed a similar issue in some of my other apps (like MyFoodDiary), where the body shrinks while sliding left, but then returns to normal size once the animation is complete. Has anyone else experienced this bug? Any suggestions on how to resolve it?

jqueryioscssmobilesafari

Answer №1

In the latest information provided by Apple regarding Safari's features found in their documentation for Safari 9.0, it is stated that:

When using viewport meta tags with width=device-width, the page will scale down to fit content that exceeds the viewport boundaries. To prevent this behavior, you can include shrink-to-fit=no in your meta tag as demonstrated below. Adding this value will stop the page from scaling to match the viewport size.

meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no“

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

Remove a row from one table by selecting a cell in a different table

I have a situation where I have two different tables side by side: one with only one column and the other with multiple columns. My goal is to be able to delete a row in the multi-column table by clicking on a cell in the single-column table that correspon ...

javascriptjqueryhtml

Having trouble with jQuery in Blogger?

I'm having trouble installing a Facebook slider tab on a friend's blog and I can't seem to get it to work. Here's the link to her blog: And here's the tutorial I'm following: jQuery is already installed on the blog (you can ...

javascriptjqueryhtmlcssfacebook

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

Consolidate all important values into a single NSMutable Array

Looking for a solution to combine multiple "ingredients" key values from a JSON file into one array? Here's a snippet of the JSON structure: { "locations": [ { "ingredients" : "Biscuits\n3 cups All-purpose Flour\n2 Tablespoons Ba ...

iosobjective-carraysjsondictionary

The inner div's CSS margin-top is causing the parent div to be pushed downwards

I am looking to move the child div downwards by 5px inside the parent div. Setting margin-top:5px; on the inner div causes both the inner and parent divs to be pushed down from the div above the parent div, rather than just moving the inner div down from t ...

csshtml

"Exciting update: Bootstrap datepicker unveils new calendar feature

Recently, I embarked on the journey of upgrading an old project that was originally built with plain PHP and JavaScript to utilize Laravel. During this process, I started configuring various elements such as select2, tinymce, and a date(time)picker, which ...

jquerybootstrap-4bootstrap-datetimepickereonasdan-datetimepicker

Setting interface builder options through code

There were countless reasons why I decided to create this UIViewController subclass view programmatically, especially since every other view utilizes IB for layout creation. Now, I have been tasked with making the app auto-rotate. While most of it is fine ...

objective-ciosxcode

What could be causing the AJAX GET request to only successfully retrieve data for the initial item in the foreach loop?

My challenge involves populating a 'transaction model' form with previously entered data when a user wishes to 'edit' the transaction. The transactions are passed into the View as an IEnumerable<Transaction>. Each transaction is d ...

c#jqueryasp.netajaxasp.net-mvc

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

Determine whether the string includes any character during keyup event

I'm currently working on implementing a live search feature on my website. I have managed to make it work where the input field and link title match, but it only matches complete words. I am wondering if there is a way to display results that contain ...

jqueryhtmlsearcheachcontains

Non-responsive country image in the navigation bar

After successfully implementing a responsive navigation bar using HTML and CSS, I noticed an issue with the flag images within my navigation bar. While the text is responsive, the flag images are not behaving as expected. Can anyone provide assistance with ...

htmlcssbootstrap-4media-queries

How can I align the selected option to the left in a CSS/jQuery selectbox?

I've been struggling to get the selected option aligned left like the other dropdown options. Even though I've added 'text-align:left;' in every CSS option, it's not working. I suspect that the JavaScript code is affecting the al ...

javascriptjquerycssdrop-down-menujquery-selectbox

End the basic JavaScript slideshow after completing one rotation

I have limited knowledge of JavaScript, but I am in search of a simple solution for a code that I want to implement. I don't need any fancy transitions or effects, just a basic slideshow that switches between images. My goal is to have the slideshow p ...

javascriptjqueryslideshowsetinterval

Include the title of the page in the printing stylesheet

Is there a way to dynamically insert the page title into the print version of my website using jQuery and CSS? I have a separate print.css file, but I'm wondering if it's possible to grab the title data as a variable in jQuery and then use CSS to ...

jquerycsstitle

Positioning the menu in Bootstrap 4 with an accompanying image

I have been using the template from and I wanted to make a modification to the menu. Instead of having the blue Bootstrap 4 text, I decided to use an image in its place. Everything looked perfect until I checked it on mobile view. The image was supposed ...

csstwitter-bootstraptwitter-bootstrap-4

CSS: text positioning issue observed in Mozilla browser

I am facing an issue with the text position inside the box/button element on my website. The text appears correctly in Chrome, but in Firefox, it is positioned above the box, making it difficult to read. Can someone assist me with fixing the CSS or identi ...

htmlcsspositioning

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

What is the best way to position the footer at the bottom of the page without obstructing any content?

I am currently working on a project that utilizes Bootstrap, and I am facing an issue with positioning the footer. Ideally, I want the footer to stay fixed at the bottom of the screen when there is not enough content to fill the page. However, when the con ...

htmlcssbootstrap-5

Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

I am currently working on a project that requires a dual scroll feature, where there will be a scroll bar both above and below the table. The table width will be determined by the user's action of adding more columns, making the width dynamic. Below ...

javascripthtmlcssvue.js

"Accessing and updating the current navigation state using jQuery/ajax when clicked

Currently, I'm working on a website project where I am using a jquery/ajax script to dynamically pull in content from another page with a fade effect when clicking on a tab in the navigation menu. You can check out the effect on the page here. Only th ...

jqueryhtmlcssajax