YUI3 drag-n-drop demo bug on IE6 (screen turns red&yellow) - drag-and-drop

YUI3 is supposed to support IE6 but here is what I try the drag-and-drop demo on IE6:
When I begin dragging, the screen turns red and yellow.
Note that I am using IETester (because I don't have an IE6 around) so that might be an IETester bug.
QUESTION: Is it something that I can fix by tweaking the YUI3 settings, or a quick modification?
Most of our users come from China, where IE6 is at 37%, so I can't ignore IE6.
UPDATE: It also happens on IE8 on the same machine where IETester is installed, but not with IE8 on separate machines, so I guess IETester is messing with the whole system.

The issue you mention only happens in IETester, not in IE6.

Related

modified CSS3 codes working on IE, but not on Chrome

why does this happen? I'm using eclipse neon.1 and tried changing the color of the font in the CSS3 code and it worked on both internal browser and IE9, but not on chrome. I restarted the server a lot of times and even rebooted the computer but it still won't be applied on Chrome....
Right click on the text and go to inspect element, see if it shows newly applied style in styles section in developer tools. If not you may need to clear cache using Ctrl+Shift+Delete and reload the app.

IE11 F12 Developer Tools on Windows 7 functionality missing/not working?

I was using IE10 on Windows 7 but it is such a buggy piece of you-know-what (hanging, crashing, etc.) that I gave up and installed IE11. It has not hung or crashed since installing. But I hate the F12 developer tools! Okay, not completely - there are some very cool new features. What I don't like is that they seem to have dropped several features that I really liked! Unless I'm just missing something... I've searched and searched on Google and Microsoft but all of the help I've found only describes the new features. Here is what I'm missing: Color picker, Ruler, and most of all, the Clear browser cache for this domain. They allege to have a Clear browser cache function, but it doesn't work! So when I make changes to my website, in particular changing graphics, the only way I can see the change is to delete all my temporary files from IE. Then I lose all of my cookies e.g. for automatically logging in to Stack Overflow! IE version 11.0.9600.16428 on Windows 7 Ultimate 64-bit.
The color picker is still available, go to the DOM Explorer tab and there is an eye dropper on the tool bar at the top towards the left. That activates the color picker.
For the issue of serving cached files try toggling on "Always refresh from server" on the network tool (3rd option from the left). This should get you the latest changes from your server.

Well rendered webfont solution

The challenge:
Provide dynamic web fonts that render acceptably across all major browsers, devices and Operating Systems
The story:
So I had used cufon or sifr in the past and had since abandoned both in favor of #font-face. After using #font-face in production for some time, I made a horrifying discovery. Many fonts (most?) look like crap in Windows XP, regardless of browser. Even in google chrome, XP renders the fonts unacceptably jagged and ugly.
I am aware of why this is happening. After reading many excellent posts on ye olde stack overflow, I understand the issue is NOT of font hinting, but of XP having clear-type set to off be default. So ALL fonts are jagged in XP by default regardless of application.
So... if #font-face works great everywhere BUT XP with clear-type off, and is still superior to cufon what should we be doing?
Possible solutions:
#font-face as default, Cufon with user agent sniffing for windows XP.
(currently using, and very much not loving it)
#font-face alone with yet unknown method of forcing clear-type
Cufon alone :(
Another paradigm all together
Failed solutions:
Adobe Typekit (jagged in XP on their own website!, even though they show a smooth specimen jpeg)
Google Webfonts (same problem with XP)
#font-face alone (same problem with XP)
Cufon so far works everywhere, but just sucks, and offers additional challenges if you are animating anything, or wish to update the text after the fact.
Do you have a solution that works completely cross browser and cross OS? What is the best way to handle this?
I'm pretty sure the web-fonts, which look ugly, are missing some hinting (edit: Nope, even though hinting is still required to make a font look good on windows, the real problem here was the disabled ClearType in XP. However, this answer has a solution anyway).
Unlike font renderers on other operating systems the windows engine relies on hinting information shipped with the font. If the hinting is missing, bad or broken the font will look ugly - simple as that. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint. After adding the hinting you can generate the different web-font-formats (eof, woff, etc) you need from the enhanced TTF. Additionally you should try to use SVG fonts if font-smoothing is disabled, since they are always rendered with antialiasing.
I've written an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script to enable SVG fonts when necessary. Hope this helps :)
PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
This is what I have found works so far. This solution detects jagged fonts, so then we can do something like this: #font-face as standard, and Cufon as fallback.
In my case, I found that the answer does not in fact center on enabling Clear Type in WinXP. Whether Clear Type is enabled or disabled, I find that some of my #font-face English fonts (especially BLACK, SANS-SERIF) look bad in IE7 and IE8. It's sometimes more than just being jagged or having bad anti-aliasing. The big problem I see is that the shape of the font itself (some fonts, not all) seems to squish into something quite unattractive. I found an acceptable solution by following the advice of Torben. Font Hinting was all I needed, and again, that solution has nothing to do with Clear Type being enabled. To get the font hinting app up and running, read the instructions here:
https://gist.github.com/davelab6/3783491
(I used the "ttfautohint-0.95.tar.gz" file here): http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/
You should also review the documentation, and you need to also install MacPorts (or you will get an error in the Terminal during your build), but since my rep score prevents me from posting more than two URLs, you'll have to Google for that.
Better hinting doesn't mean your #font-face fonts will now look as perfectly smooth and great on IE in WinXP as they do on Macintosh browsers. But I found that the font hinting prevents nasty distortions in the shape of some fonts within IE7 and IE8. To me, that is an acceptable solution.
I can only add that it's rather troublesome to build the ttfautohintGUI on OSX. You have to installed hundreds of MB of software, downloading from multiple locations too, just to build the GUI app. But once done, the app allows you easily to hint your #Font-Face fonts and resolve many WinXP display issues. Just be sure to tick "Windows Compatibility" in the GUI (it's unticked by default). I also unticked the "Add ttfautohintinfo" and "Pre-hinting" options, leaving everything else as their defaults. Click "Browse..." to add your Input File (the font you want to hint), and then copy and paste that path in the Output File, changing the filename to whatever you want it to be. You won't enable the "Run" button unless there is something in both the Input File and Output File fields.
Best wishes.

Comments Plugin height bug

Despite being pretty against implementing plugins onto my sites, I have decided to use the Comments Plugin on one of my pages. The plugin works fine, however, there seems to be a bug whereby the height of the iframe does not change in certain circumstances.
If I add a comment and then remove it, the height does not resize back down to fit the content tightly.
Occasionally, I load the page and the iframe is huge. This is rare and I find it very hard to recreate so I am not actually sure what the cause is but anyway.
There seems to be unpredictable padding at the bottom of the iframe.
I am aware that this is a problem with the plugin, not with my code but I just wanted to know if anyone else had experienced it and if they knew of a fix?
What is the fastest and best way of implementing the plugin? i.e. FBML or iframe?
I have reported the aforementioned bug to Facebook and they have recognized that it does exist and claim that it is being looked into. However, this was over 2-3 months ago so I am not holding my breath
If it's a bug, then it's a bug (and to get facebook to admit to bugs is not easy). So I'd say hang tight until they fix it. I really don't think there's much you can do about it ...
...other than remove it from the DOM and re-add it to the DOM when it does break.
Or give the website user a "fix it" button that fires off the js to remove it from the DOM and re-add it back.

Benefits and concerns with Google Chrome Frame

Is this a technology I should spend much time evaluating?
http://code.google.com/chrome/chromeframe/
Chrome Frame is a plugin for Internet Explorer (IE6-IE8) that gives it, well, what all the other major browsers have.
Biggies for me are the Canvas tag and a fast JavaScript.
As I do a lot of JavaScript dataset visualization, IE6 is a perpetual thorn in my side, and I often have to write extra code for it, and I often have to slow down the frame rate of user-driven real-time visualizations. Using Google Chrome Frame will allow me to produce a much more responsive experience for IE6 users.
But I wonder if IE6 users may be in situations where their computers are under some kind of IT lockdown hell where they aren't even allowed to install a plugin (why else would they be using IE6?)
So I'd still be left with what to do with the last poor souls in IE6.
Still, IE8 lacks Canvas and the JavaScript is slow, so some of my users would see increased performance, maybe even up to Google Chrome and Safari levels.
So again, my real question: Is this a technology I should spend time evaluating?
Note: Google will be throwing up alerts to IE users to encourage them to download Google Chrome Frame for Google Wave. So maybe Google will get enough Google Chrome Frames out there on IE machines that I can just detect it and use it if it's there, and warn the user that experience may suffer without it. I hate to demand anything of my user. http://googlewavedev.blogspot.com/2009/09/google-wave-in-internet-explorer.html
Given the visualizations you're working on, I'd definitely evaluate it. The potential upside for you as a developer and for your users is significant. You do not have to force all Internet Explorer users to use Chrome Frame. You can simply include the meta tag and the users that choose to install the plugin will almost certainly have a better experience.
That said, in my evaluation of Chrome Frame I have encountered some pretty big caveats that might be showstoppers for your project:
Older versions Chrome Frame can't print (see bug list). Depending on what kind of visualizations you're doing, this might be a real deal killer.
Downloads work but appear to the user like nothing has happened (see bug list again).
Chrome Frame is basically the Google Chrome browser shoehorned into the IE browser chrome. As such, any interaction with the browser inside the frame is with Chrome, not IE. If you right click and select Inspect Element you will get the Chrome developer tools window with its Vista-like look and feel. You'll need to make a judgment call as to whether your users will be comfortable with that.
In my testing, it appears like Chrome Frame is only looking at the meta tag:
<meta http-equiv="X-UA-Compatible"
content="chrome=1">
I was unable to get Chrome Frame to activate by setting the X-UA-Compatible HTTP Header as you would with EmulateIE7 mode:
Header set X-UA-Compatible "chrome=1"
It is also worth noting that this meta tag will override EmulateIE7 mode if you have that setting configured and I believe the inverse is also true too. They are both setting X-UA-Compatible. The last tag to set this will take precedence.
One power testing tip that will help save you from having to go in and edit your pages, is that you don't have to do anything to your site to test it with Chrome Frame. Once you have the Chrome Frame plugin installed in IE, simply prepend gcf: to the any URL and it will load it in Chrome Frame (e.g. gcf:http://dshaw.com ).
Happy coding,
- #dshaw
Think you should really spend some time on it since i just tested it and it works very well !
It gives you ie6 with the chromium speed !
And google will surely have enough power to spread it a little. Also you can advice your users to install chrome frame for your application if you really need it.
If you can install flash on ie6, you'll be able to install chrome frame.
Some users that can't install google chrome, will be able to install chrome frame.
I agree with you when you say that you don't like to demand anything of your users. That's generally a good philosophy. I would recommend evaluating how much you need the Canvas and how slow JavaScript really is.
Considering that IE is still the most popular browser (well, the most widely used, anyway), if your web-application is going to be used, you have to take IE into account (as you already are). The real question to ask is, "How much is the user's experience going to suffer if they use IE 'as is'?" If it really will degrade performance, and it will hurt your user base, then, yes, I would check out Google Chrome Frame.
I think it is a good alternative to sites which are considering not maintaining support for IE6.
Recently some big sites stopped working in IE6, they could ask for chrome frame instead of showing you can't access that site in your browser.
Is something good also for improving performance for google chrome frame users.
I'd say no. It is a waste to spend time evaluating it.
Whoever can and want to install extensions to IE6/7/8 can and should install a modern browser (Firefox/Safari/Chrome). The benefit would be both better performance and better support of standards across the board, more than a plugin for IE can provide.