iOS9 UIWebView/Chrome CSS animations

During the process of enhancing our website for responsiveness, I integrated a menu system inspired by this example - http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

Things were going smoothly until we updated our test iPhone 6 from iOS 8 to iOS 9. Although Safari continues to function correctly, Chrome and our app utilizing a UIWebView are unable to display the slide transition, unless I manually adjust settings using the Safari web inspector.

Despite attempting the solutions provided in Safari on iOS 9 does not trigger click event on hidden input file, no changes occurred.

I am aware of the javascript location/hash issue, but uncertain if it is related to the current problem.

Has anyone else experienced this issue and discovered a workaround or solution? Upgrading to Safari Web View is not a viable option at this time.

ioscssuiwebviewios9mobile-chrome

Answer №1

After extensive troubleshooting, a solution has finally been uncovered. It appears that the iOS 9 UIWebView, particularly version 9.0.2, has caused the tilde (~) selector to break.

To address this issue, I had to be more specific in my coding approach and utilize the plus (+) selector in CSS to achieve the desired functionality.

The snippet below provides a simplified depiction of the menu system that is now operational:

<input type="checkbox" class="nav-trigger" id="nav-trigger" />
<nav class="MobileMenu" />
<div class="Content">
    <label for="nav-trigger"/>
</div>

Prior styling instructions for pre-iOS 9:

<style>
    /* Previous styles here */
</style>

Revised CSS for post-iOS 9 update:

.nav-trigger:checked + nav.MobileMenu
{
    display: block;
}
.nav-trigger:checked + nav.MobileMenu + div.Content
{
    -webkit-transform: translate(60%,0);
    -moz-transform: translate(60%,0);
    -ms-transform: translate(60%,0);
    -o-transform: translate(60%,0); 
    transform: translate(60%,0); 
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

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

The widths specified in the td tags do not take effect on tables with auto width

Check out this fiddle: http://jsfiddle.net/LHsLM/1/. I'm attempting to set the height and width of an auto-width table using inline CSS, as shown in the fiddle. However, the styles are not taking effect. Here's the HTML: <div id="a">< ...

javascripthtmlcss

Having trouble incorporating Bootstrap 5's SASS variables into my project's SASS files

I'm attempting to utilize Bootstrap 5 variables in my custom styles.scss file. I have integrated the entire Bootstrap 5 source code into my project. I have noticed that I need to import specific .scss files in my styles.scss file for it to function co ...

csssassbootstrap-5

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

javascriptcssangulartypescriptbootstrap-4

Color-matching cells must be positioned in the same column within the gridbox consecutively

In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: ht ...

htmlcssflexboxgrid-layout

What is the best method for creating a draggable widget in HTML, specifically with the use of Angular?

I am searching for an HTML div that is free floating and can be dragged and positioned anywhere on the page without being affected by other elements. It's okay if the element blocks the view of elements below, and it would be great if there is a minim ...

javascripthtmlcssangularjs

Locate the class identifier within the source SCSS document that is condensed into a unified CSS file when rendered in the browser

In the application I'm working on, the index.html file uses app.css, which is generated from multiple SCSS files. When inspecting an element to find its corresponding CSS, is there a way to determine which SCSS file that style originated from? ...

htmlcssangularjssasssingle-page-application

Tips for adjusting the height of an element to accommodate the height of another element

I am facing an issue with a dynamically added div using JS. The div includes an overlay and a contained element that should scroll along with the page if needed. I want to prevent any scrolling within the div itself, which resizes based on its content. The ...

javascriptjqueryhtmlcss

Having trouble deleting activities with Siri Shortcut and NSUserActivity

I have been exploring the functionalities of NSUserActivity and CoreSpotlight APIs by closely following the examples in the WWDC videos titled Introduction to Siri Shortcuts and Building for Voice with Siri Shortcuts. However, I am encountering difficultie ...

iosobjective-ccorespotlightnsuseractivitysirishortcuts

Mobile media queries are ineffective despite implementing the viewport meta tag

I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening? Update: Upon further investigation, I ...

htmlcssmedia-queries

How can I combine HTML and CSS in a single request using the sendFile method in Express?

const app = require('express')(); app.get('/', function(req, res) { res.sendFile(__dirname + "/" + "index.html"); }); <link rel="stylesheet" href="style.css"> I utilized the Node.js code above to send an HTML file. In order to ...

htmlcssnode.jsexpresssendfile

What are some tips for troubleshooting a website on an iOS device?

What are the best methods for troubleshooting iOS websites? My website is not functioning correctly on iPhones as expected, unlike Firefox or Chrome on desktop. In order to identify the issue, I need to troubleshoot it. Are there similar tools like develo ...

htmliosiphonedebuggingremote-debugging

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

My code includes a div within another div, taking up 50% of the page's width: <div id="mainContainer" class="mainContainer"> <div id="scroller" class="scrolling"> <!-- items here should make the div really long --> & ...

javascripthtmlcss

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

Showcasing a set of divs - arranged in rows of three

Utilizing bootstrap 3 to exhibit user contact details on a website has proven to be challenging. My initial idea was to use the col-md-4 bootstrap CSS class to showcase three contact details per line, but it seems my expectation did not match reality. Th ...

htmlcsstwitter-bootstrap

tool for customizing color and background properties

I'm working on implementing 3 different color combinations for the various elements of the website. For pattern 1, I am using: background-color: rgb( 233, 239, 245 ); and color: rgb( 0, 0, 0 ); There are two other patterns that I have created, e ...

css

How to review the current page in Joomla 2.5

Is there a way to determine the current page the user is visiting in Joomla 2.5? I have a code snippet that checks if the user is on the home page: $menu = $app->getMenu(); if ($menu->getActive() == $menu->getDefault()) { However, I now need a s ...

phphtmlcssjoomla

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

Pulling a Bootstrap 3 Navbar from the side

I was in the process of developing a navigation bar for my Bootstrap website when I had an idea to make it more visually appealing by having it slide out from the left side of the page. In order to achieve this effect, I decided to proceed with the followi ...

jqueryhtmlcsstwitter-bootstrap-3

Is there a way to adjust paragraph sizes in CSS flexbox so they scale with the font size?

After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem. The issue at hand is c ...

htmlcssflexbox

How can you ensure an image is centered properly when padding is applied?

Is there a way to center an image without affecting padding around it? Check out this sandbox for reference HTML <div class="imageParent"> <figure id='img-div'> <img class='image card' ...

htmlcss