I've tried using FadeToggle, FadeIn, and FadeOut, and I can get none of these to work on mobile safari, but they all work great in Firefox (which I'm using to test responsive design). This is the relevant bit of code, which is in global scope:
$('#swipeicon').bind("load", function () {
$(this).delay(100).fadeToggle('slow').fadeToggle('slow').fadeToggle('slow').fadeToggle('slow');
});
Many of the other similar issues I've seen asked about on SO and around the internet pinpoint the problem as being a position:fixed style somewhere...but nowhere do I have a position:fixed. It's completely mystifying.
I've tested the function with an alert in it and that doesn't fire. I tried an alert in $document.ready(), and that does fire on the iPhone...so jQuery is being loaded in. I really don't know what this could be or what to try. I've previously written the fadeIn/fadeOut in native JS, but can only get it to loop once on the iPhone (when I need it to loop twice, which it does perfectly on desktop). This is immensely frustrating and time-consuming.
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
I've been creating a portfolio website for a friend. In an attempt to make the site responsive and artsy, I chose to pull in twitter bootstrap and skrollr. I noticed that in safari in iOS that the site seems to be cut off at a certain point. Has anyone else ran into this issue before? I have provided a link below in case anyone notices anything obvious.
http://jennaparysek.com/
Thanks!
A lot of people (including myself) are having troubles when using skrollr on mobile devices. In order to use both "fixed" and "relative/absolute" position at the same time, you have to put all the divs that are not fixed inside a div called #skrollr-body
However, the real problem is that your skrollr is being confused when getting the height of your
skrollr-body. you can try to put forceHeight: false inside your skrollr.init()
if that doesn't work, it might because skrollr doesn't know where is the end of #skrollr-body, so just put an empty div after your #skrollr-body and give it a keyframe. It should works just fine now :)
I'm binding to the jQuery Mobile pageinit event to do some additional stuff after a page has been created/enhanced and loaded into the DOM (per the docs) like so:
$('#home').live('pageinit', function()
{
...
};
But, all I'm getting is a white spinner and the page never displays on an iOS device running OS6. It works fine in the simulator. What could I be doing wrong?
There are plenty of references to pageinit not working if placed in the wrong part of the page, though generally that wouldn't cause the page to stop loading.
A script error in the event handler (the ... part) could cause the symptoms described, but would likely work the same in the simulator.
Are you sure all the files are referenced correctly? Unlike OSX, iOS is case sensitive, so a reference to jQuery.js instead of jquery.js will cause problems that you can't see anywhere else. You should be able to connect the desktop safari web inspector to the app to find any load errors.
I would be grateful for some pointers on how to troubleshoot this problem. Quick summary of the situation:
I have a large document (200K) divided into five main sections of inequal length, each of which corresponds to a jQuery UI tab.
The page works perfectly in Safari for Windows, Safari for Macintosh, Opera, Firefox, Chrome, and IE.
The page used to work on the iPad too but it no longer does, and it's the iPad that has changed, not the page.
On the iPad, the tab-content is now getting cut off. E.g. one of the pages is a glossary that runs from A-Z and the page cuts off at the letter -H-. It used to scroll all the way to -Z-. For some reason, iPad Safari is not giving each Tab the full amount of vertical space it needs for its content.
I've looked at the jQuery UI code for the show tabs and it appears to be changing CSS classes hide/show, but I'm no ninja javascript coder. How do I begin to figure out what's wrong on the iPad when my page works as expected on every other browser?
EDIT: The page seems to be working fine on the iPad2. It could be a caching issue and the page might stop working at some point even on the iPad2--I could only test at the Apple store. But I believe the markup and coding and jQuery ui are essentially OK, and it's a iPad Safari issue.
I can't trouble-shoot myself without the code, but the by far best way to trouble-shoot situations like this is to use a tool called Weinre. Obviously if one browser (the iPad's) is having trouble, you need to troubleshoot directly with it. That's difficult since the iPad doesn't have developer tools, but Weinre can actually give you (most of) that, over the network.
Follow the instructions here, but at the least you need to provide a ~/.weinre/server.properties that contains this:
boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5
That will tell weinre to listen on every IP on the port 8081. Start Weinre (via the OS X runner or with java -jar weinre.jar on the command line.
Then you add a special script tag in the main page:
<script src="http://YOUR_IP_NUMBER:8081/target/target-script-min.js"></script>
After this you start Safari or Chrome and go to http://localhost:8081/client/. If everything went as planned you will see the Weinre interface, which is a subset of the WebKit developer tools.
Now connect to your development machine with the iPad or simulator. If the script tag is correct Weinre makes a connection to the iPad and you have a fairly large subset of WebKit's developer tools at your disposal for trouble shooting. Good luck!
I'm sure this isn't the answer you're hoping for, but it sounds like a bug that should be reported to Apple.
You have a page that works perfectly on every other browser and I think its in Apple's best interest that it works on the iPad as well.
There might be other pages out there that used to work, but now don't, so I would consider this bug to be pretty high priority.