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.
Related
Is there an "Angular/Dart" way to detect older unsupported browsers and prevent to continue with an elegant message (there are plenty of examples using javascript) rather than continue and show a weird layout with code that doesn't work?
Even the angulardart.org/demo site should do this IMO to stop IE8 (I know, but some enterprise customers still have those old browsers installed - and set as default - for legacy apps) from showing content that doesn't even work.
If Dart code cannot be executed the test has to be done in Js. I'm not aware of a library that makes this test.
The test should follow What browsers do you support as JavaScript compilation targets?.
I have a website that's using jquery.ie6hover.js (https://github.com/gilmoreorless/jquery-ie6hover)
And I've just updated to latest version of jQueryUI (1.9.1)
This combination crashes the browser when opening the page in IE6.
It's crashing when calling:
$.ie6hover();
Here's a jsfiddle: http://jsfiddle.net/umhxQ/
I'm testing IE6 using Virtual Box, with Windows XP SP3.
Any ideas how to prevent IE6 from crashing?
I stumbled upon "ie7.js", which seemed to do the trick.
It contains a fix for the hover bug in ie6 (without jQueryUI conflicts)
And jquery.ie6hover.js is no longer needed!
ie7.js - the one you found already - is a great script. It's a bit overkill if all you want to do is fix the hover, because ie7.js fixes loads of stuff. That's great, but if you don't need all the features, then you may be slowing down the browser unnecessarily.
If all you want is to fix the hover, my preferred script is Whatever:hover, which is the one I used to recommend for this.
(when I say "used to recommend", there's nothing wrong with it; it's because these days I don't really recommend supporting IE6 at all. But if you do need to support it, then Whatever:Hover is what I'd use)
I just updated the jQuery Mobile version of our client book-in page to the latest 1.0a4.1 and I need some help debugging a window sizing issue off-site (I'm not on location).
The page runs on an iPad at the store so clients can book in their own cases. However, the page is being displayed like it's on an iPhone with huge lettering. "Emulating" with Ripple shows everything as it should, though.
I can't debug it from here and I'm not using any other CSS besides the base 1.0a4.1 stylesheets. How do I force jQuery Mobile to display the page as if on an iPad?
Here is a screenshot sent by the store clerk:
I didn't have the time to test it or try the fix, so it's still a guess, but at least based on your code inspection ;)
ok, so you put a meta viewport in your page and JQM also pops in a little
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport">.
As I said - I didn't test it, but I expect a collision. I have read somewhere that JQM was supposed to stop putting those metatags there... Try fiddling with that metatag a bit.
Also - see if the alpha4 or 4.1 release notes (on the blog) say something about viewports.
Running Media Queries
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.
I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.