Issue with modal window function on iOS 8

I have a mobile app available on the store that was created using the Ratchet framework. Everything was working smoothly until the release of iOS 8. Now, when I test the app on iOS 8, the title bars for modals are not appearing. Although the controls like the 'Close' and 'Back' buttons on the bar still function when clicked, the bar and its controls are not visible. This issue seems to be isolated to iOS 8 as the app works fine on iOS 7 and earlier versions.

To replicate this issue, please access this demo app in Safari on an iOS 8 device or simulator. Click on the 'New note' button to open a modal and observe the problem.

While troubleshooting in Safari's web inspector, I discovered that temporarily moving the <header>...</header> element of the modal to a different location and then returning it to its original position makes the bar visible again. Sometimes, changing its display property from block to none and back to block resolves the issue. Occasionally, scrolling the page also triggers the display of the bar.

I would greatly appreciate any solutions or suggestions to address this problem.

iostwitter-bootstrapcssios8ratchet

Answer №1

There seems to be a problem with the use of position: fixed in Safari, as evidenced by this discussion on a related question on Stack Overflow: Mobile safari position:fixed z-index glitch when scrolling

One potential solution is to include the following rule in your CSS

header.bar.bar-nav {
  -webkit-transform: translateZ(0);
}

To keep updated on this issue, you can monitor the progress on Ratchet's Github repository at this link - https://github.com/twbs/ratchet/issues/679

Answer №2

If you're facing issues with the position property on Safari, consider using position:sticky;. The fixed value has been causing problems on mobile devices for a while now. Even in the latest version of iOS8, there may still be some weird behavior...

For more information, check out this resource:

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

Using jQuery to create dynamic CSS effects directly on the drop-down menu button

Seeking your kind assistance once again... I am attempting to design a navigation bar that displays the dropdown section upon hovering over the buttons AND shows a bottom border on the button that was last hovered over My code functions properly when I ...

htmljquerycss

JQuery requests functioning flawlessly on one system while encountering issues on other systems

I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests a ...

javascriptjqueryhtmlcss

Tips for leveraging Bootstrap Collapse alongside KnockoutJS foreach template

I'm working on a template for an inventory page where users can add items to a store. The challenge I'm facing is how to display basic information like name and price initially, and then expand to show more details when clicked. I'm using kn ...

jquerytwitter-bootstrapknockout.js

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

I need assistance with aligning the Post button to the right and having the text field for tags occupy the entire left section of the row within a Bootstrap 3 form. The form markup is shown below: https://i.sstatic.net/401RU.png Below is the complete cod ...

htmlcsstwitter-bootstrap-3

When hovering over the alternating rows of a table, the shadow effect does not appear

I'm encountering an issue with CSS. I have a table and when hovering on the table's tr, there's a CSS property for box-shadow. The problem is that this box-shadow isn't fully visible for the even rows. https://i.sstatic.net/9uSjO.png ...

htmlcss

Unexplained vanishing of CSS padding upon form submission

Hey there! I've been working on creating a contact form using PhP, HTML, and CSS. Everything seems to be working fine except for one issue - when I submit the form with incorrect information, the CSS padding disappears. Can anyone help me figure out w ...

phphtmlcss

Applying the active state to the link will cause it to inherit the default styles of the

I am facing a challenge with overriding the active style of links in a universal manner, to restore them to their original state when they cannot be interacted with (such as during scrolling). In my current code, I implemented this: .scrolling a:active { ...

css

Unable to open drop-down menu in Bootstrap-select on ASP.NET web application by clicking

Currently, as I work on developing an ASP.NET web application, I find myself facing significant challenges in getting the bootstrap-select feature to function correctly. Despite browsing through various threads on SO for solutions, the problem remains unr ...

javascriptasp.nettwitter-bootstrapbootstrap-5bootstrap-select

Scrolling to the top of a UIScrollView triggers a UIViewController transition

I'm struggling to grasp the best way to implement this concept: ViewControllerB contains a UIScrollview that was presented by ViewControllerA. When the user scrolls to the top of the UIScrollview and continues to pull down with nothing else to scrol ...

iosobjective-cuiviewcontrolleruiscrollviewuikit-transitions

Can the <br> tag affect the layout in terms of horizontal space?

I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...

htmlcss

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...

htmlcss

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

I am facing an issue with a grid of accordions, as demonstrated in the codesandbox linked below. The problem arises when I open one accordion, causing all the accordions in the row below to shift down. Ideally, only the accordion directly below should be p ...

cssflexboxmaterial-uigridaccordion

Activate Static Force in Sprite Kit

Consider this scenario where I am exerting an impulse to a node upon touch: [_bird.physicsBody applyImpulse:CGVectorMake(0, 15)]; My objective is to have a consistent "static" impulse. Allow me to clarify: If my node is falling due to gravity, applying ...

iossprite-kitgravity

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

Dynamic image gallery with a flexible layout and interactive scrollbar using Flexbox

I'm looking to incorporate a scrolling image gallery into a flexbox layout so that as the browser page size changes, the gallery will scale according to the flex-grow index. My goal is to ensure all images remain accessible via a scrollbar without usi ...

htmlcssflexboxscrollbarimage-gallery

The translation feature in React does not seem to be functioning properly with SASS

After trying various display settings like flex and block without success, I realized that the transform property was not working as expected. Despite centering elements successfully using other methods, the transform doesn't seem to have any effect o ...

htmlcssreactjssass

Prevent click from closing offcanvas in Bootstrap 5

I'm currently utilizing the offcanvas feature from Bootstrap (https://getbootstrap.com/docs/5.0/components/offcanvas/). I've successfully prevented it from closing when pressing ESC, but I'm now curious if it's feasible to keep it from ...

twitter-bootstrapbootstrap-5off-canvas-menu

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

//Button.jsx import React from 'react'; const Button = (props) => { let color = props.color || 'blue'; return ( <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus ...

htmlcssreactjstailwind-cssvite

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

htmlcsscss-transformsvertical-text

The reorder controls are not displaying on the UITableView

I have encountered a problem that has been raised before, but the usual solutions such as implementing both delegate and datasource methods, setting the delegate and datasource correctly, and so on, have not resolved the issue. I am completely baffled at t ...

iosuitableview