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)
Related
I'm using bootstrap carousel, and it works fine in chrome and explorer, but for some reason in firefox 35.0.1, when the image loads it only loads half of the image than the rest takes longer to load. Anyone have a problem with this in firefox? I'm surprised firefox is the problem here, since it is usually IE that I have issue with. The problem just started with this new version of firefox.
You are not the only one. We've seen this across multiple Windows boxes with FF 35.0.1. We've not tried this on a Mac, though. Can confirm this problem exists, and am really glad we're not the only ones who've noticed it. It's a consistent issue, regardless of caching or network speed.
Great news!: It's been fixed in Firefox 36! Try updating your browser. Here's the Bugzilla which should have addressed the problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1125077
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'm in the process of upgrading an old codebase containing jquery v1.2.7 to the v1.2.9. The corresponding UI upgrade is from v.1.6b to v1.9.2 (1.10 doesn't work with IE6). There are a bunch of ui plugins that are atleast 6 yrs old, and most of their authors no longer actively support them.
I took a layered approach of performing this. I first upgraded all the core files (jquery, jqueryUI), then upgraded inhouse js code (attr, $.browser) and such. Then I monkey-patched some of the plugins that had attr and browser. I've managed to work through all the bugs and errors so far. I now have a "clean" build, with a lot of the ajax functionality working as well.
BUT, I'm facing a pretty sticky issue with the facebox.js (yup THAT relic) plugin. I don't see any errors (js, network, or others) in the debuggers (IE8,FB,Chrome), but the facebox dialog displays incorrectly. It still displays the content inside it, but it is transparent and the background and edges do no show. I checked all my css as well as validated using w3c validator. Due to an NDA, I can't post the markup here. I realize that without the markup, even the considerable expertise here might not be able to give a complete solution. Could someone atleast give me some pointers on what I could be overlooking, or things to look for? TIA
eastwood
As you said, without markup it's difficult to figure out what's going on there, and my answer might be really stupid - but since you don't get any errors in the debug consoles and the box is transparent - is it possible that the images are missing/incorrectly referenced in the CSS?
Not sure how this old facebook.js plugin works, but I've seen one some time ago that used images for backwards compatibility with IE6 (for alpha transparency/rounded borders) - but not always. I think for modern browsers it drew that stuff itself. (pretty much like Facebook did it itself on its site)
So perhaps the error is related to JavaScript expecting images/etc. to be handled by CSS, but the CSS uses an only-IE6-hack?
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.
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.