Canvas Drawing with browser compatibility - cross-browser

In my application, I created Canvas and started to draw lines, rectangles and drawing with pencil. Everything works good on Firefox and Chrome(with latest versions). The Problem with IE only. While I draw on canvas with pencil, it was not draw at mouse pointing spot (drawn little bit top of the cursor point). I used IE version 10 only. Need to add any code for browser compatibility issue on IE 10??
Note: It was working on IE 9 but, If I changed browser version to IE 10 Compatibility View, It was showing This Browser doesn't support Html 5. Try with higher version
Thanks in Advance...

IE-10 compatability view makes IE-10 compatable with earlier version of IE. Canvas does not work with versions before IE-9. Using explorercanvas at http://code.google.com/p/explorercanvas/downloads/list allows canvas to be used with earlier versions.
Does your script work in IE-10 with compatability not switched on? It should do.

Related

Website Layout not functioning in Safari

just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.

Flash embed with html overlay, wmode="direct"

I'm trying to place html elements over a flash video which must be rendered with wmode="direct" (video occupies entire window with html UI to be laid over it, anything other than direct makes CPU usage surge).
I've tried using an iframe to include the flash video, but I'm still unable to place any elements over it. Is there a workaround to achieve this?
According to Adobe's wmode browser support matrix, all major browsers at current versions on Mac already support this use case. On Windows support is spotty, only IE 9+ is claimed to work.
Like you, I'm trying to find out if/when Adobe plans to extend HTML overlay support for wmode=direct in Windows browsers. The linked page only talks about Chrome up to 10 and FF up to 4, so more progress may have already been made since the doc was last updated.
If I find out something useful I'll add it to this answer, until then it's probably safest to assume you need IE 9+ on Windows to support direct+overlay.
We are finding that most browsers support HTML overlay when wmode="direct" - however no browser is able to support transparency overlayed on top of the flash. Not even PNGs can alpha blend correctly. Any pixels that have an alpha channel and ignore as if there was no pixel at all.
When creating UI to layer over the top of flashs we have to "blanket out" the SWF - or - use rectangular DOM elements (ie, no rounded corners)
Furthermore - IE 9 on Windows 7 and older version simply fail to overlay anything over the flash. Iframes seem to pierce the SWF, but HTML elements do not.

My HTML5 webpage is not being read correctly in IE 9

Hello my website http://www.paruhdice.com/index2.html is not acting as it should be. It worked some what fine in IE 8. And works perfectly in the latest CHROME and Firefox... but my sliding navigation is not even responding. What should I do? Prompt users to use CHROME or FIREFOX... or is there a fix to this? Thanks ahead of time
It seems to be working for me in IE 9.0.8112.16421 as well as the latest Firefox release. The left-hand navigation bar moves smoothly with the window as I re-size.
Unfortunately, HTML5 is not a fully implemented standard, so you won't get full support in any browser. IE9 was also released back in march and both Chrome and Firefox have made great strides since then to add more support for HTML5. Doing a quick web search I came up with the site, http://html5test.com/results.html. It certainly gives an interesting overview of your current browsers support for html5 as well as the ranking of other browsers by comparison.
Since it all ready sounds like you are telling all of the old IE, Safari, Firefox users to update to view your site, I see no reason to tell them some features don't work and you recommend they upgrade.

About Internet Explorer 9 document and browser mode

Good day! I have got a question about the Internet Explorer 9. Can anyone tell me if its document and browser mode (I mean rendering as Internet Explorer 8 and 7 when chosen) is appropriate to test HTML and CSS in different versions of the browser?
I used to use something like Multiple IE on my virtual Windows machine, but my colleague use the Internet Explorer 9 to test HTML and CSS "directly". So none of us has a sense of correctness of the chosen solution.
So, that's the question.
In my subjective experience, IE9's 8/7 "Browser Modes" have always been an accurate reflection of the actual browsers - at least for pure HTML/CSS.
However, there are subtle differences when it comes to JavaScript, see the "Differences between IE8 Compatibility View and IE7" section here:
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
I usually test with IE9's older "Browser Modes", but if I'm feeling paranoid or I want to be absolutely sure, I use my virtual machines.
IMHO the answer to your question is yes - go with the browser modes.
Here is a good article for you
http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Few differences that I have seen in IE9 Doc Mode vs real IE8 or IE7:
1) If a PNG image is given opacity (via Proprietary CSS filter), 'Real IE8/IE7' shows black linings.
2) JavaScript performance in 'Real IE8/IE7' is obviously not as fast as IE9.
3) Fonts also tend to have some display issue in various modes: http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/ and font smoothing is an issue in windows XP.
4) Embedded YouTube videos have z-index issues overlapping other elements (fixed by wmode).
5) Proprietary CSS filters work properly in 'Real IE8' but are not shown if applied to an HTML5 element in IE9 doc mode. (Faced this once)
Summary: If the site you are making is JavaScript intense or the client is very much concerned about users on IE7/8, have a check on Real IE 7/8 and get the issues ironed out.

Image color differences in different browsers. (Firefox, Chrome, IE)

Oi!
I have a question regarding the differences in how images are being rendered inside of Firefox then in Internet Explorer. Firefox version is 3.5.19 and Internet Explorer version is MSIE 7.0.
Firefox http://www.wmclan.net/i/images/15877834356924635314.png
Internet Explorer http://www.wmclan.net/i/images/95502460007153569229.png
I was thinking a possible solution from Firefox 3.5 color correction hack? but is there a better way of doing that instead of running every single image through that process? How do I make it so that the images have the same background color as the background... I selected the color from the background with photoshop's color picker and used the same color code for each the image and the background image. This works fine with IE and also Chrome.. have not tested on other browsers.
This has to do with the gamma data that is added to the images. I thinks this is only a mac issue. The image is altered based on the gamma data, and doesn't match the css color values.
The solution you found is the only way to disable this "feature".
If you don't like the command line there is also easy drag and drop tool called PngThing.app for mac. I'm not using windows, so you'll have to google for that.