652955 - Make MarkUP Support IE9, Firefox 4+, Chrome

Status: VERIFIED FIXED

(Websites Graveyard :: markup.mozilla.org, defect, P2)

Description

[Matt Brandt [:mbrandt]]

The application currently supplies an error message to users using non-supported browsers suggesting that they upgrade. For the time being its been agreed that we will currently support Firefox 4.0.x and the Google Chrome 10.x and above.

Please add Opera and IE to the non-supported browser list.

Comment 1

[Laura Mesa [:lmesa] [:lvmesa]]

Paul advises we not use UA detection, but feature detection to determine when the message pops up. "UA sniffing" is considered a bad practice on the web.

Comment 2

[Matt Brandt [:mbrandt]]

Thanks Laura, that's good to know. So what should be done with IE and Opera (the latest versions). They are both making it past feature detection but are unable to properly render the artifacts on the site.

Comment 3

[Laura Mesa [:lmesa] [:lvmesa]]

Paul, what do you recommend?

Comment 4

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #2)
> Thanks Laura, that's good to know. So what should be done with IE and Opera
> (the latest versions). They are both making it past feature detection but are
> unable to properly render the artifacts on the site.

I think we should still offer them the error message that they're browser is not compatible. Is that possible?

Comment 5

[Matt Brandt [:mbrandt]]

Paul or Adam I'm curious, if the app already does "feature detection" I'm assuming that you qa'd this on your end. What browsers did you test on? IE does not render the site very well. Opera appears to render it fine but clicking on components doesn't seem to work.

Is there an artifact in our test env that makes our test systems different than yours?

Comment 6

[Adam Miller]

I am doing feature detection. It only fails to render if the browser can't/won't run javascript, if it doesn't have canvas support, or if it doesn't have a native JSON parser. 

Before our first code handoff, I had QAd it in IE 7 and 8 and made adjustments to get it rendering correctly. Because those browsers are lacking canvas support, they wouldn't execute the JS.

Comment 7

[Paul Rouget [:paul]]

I use a nightly, and I see the Warning. You really should avoid UA sniffing.

What's wrong with IE and Opera?

Comment 8

[Paul Rouget [:paul]]

(In reply to comment #6)
> I am doing feature detection. It only fails to render if the browser
> can't/won't run javascript, if it doesn't have canvas support, or if it doesn't
> have a native JSON parser. 

Why do I see a Warning with a nightly then?

Comment 9

[Matt Brandt [:mbrandt]]

Attachment: IE9 Layout problems

(In reply to comment #6)
> Before our first code handoff, I had QAd it in IE 7 and 8 and made adjustments
> to get it rendering correctly. Because those browsers are lacking canvas
> support, they wouldn't execute the JS.

Thanks Adam that helps a lot :) I think there was a miscommunication, I thought we were only supporting browsers with canvas support. I'll take a look at IE 7 & 8 so we're both seeing the same.  

Here's a screen grab of what I'm seeing in IE9. As You can see the layout of the components on the is a bit off.

Comment 10

[Paul Rouget [:paul]]

(In reply to comment #9)
> Created attachment 528603 [details]
> IE9 Layout problems
> 
> (In reply to comment #6)
> > Before our first code handoff, I had QAd it in IE 7 and 8 and made adjustments
> > to get it rendering correctly. Because those browsers are lacking canvas
> > support, they wouldn't execute the JS.
> 
> Thanks Adam that helps a lot :) I think there was a miscommunication, I thought
> we were only supporting browsers with canvas support. I'll take a look at IE 7
> & 8 so we're both seeing the same.  
> 
> Here's a screen grab of what I'm seeing in IE9. As You can see the layout of
> the components on the is a bit off.

Looks like a CSS problem (that can probably be fixed).
What about the Canvas part? Is it working?

Comment 11

[Matt Brandt [:mbrandt]]

(In reply to comment #10)
> Looks like a CSS problem (that can probably be fixed).
I agree.
> What about the Canvas part? Is it working?
I am able to make a mark but unable to submit it. I am also unable to browse existing marks

http://screencast.com/t/M84KLJkIj8bn

Comment 12

[Paul Rouget [:paul]]

(In reply to comment #11)
> (In reply to comment #10)
> > Looks like a CSS problem (that can probably be fixed).
> I agree.
> > What about the Canvas part? Is it working?
> I am able to make a mark but unable to submit it. I am also unable to browse
> existing marks

What's wrong? Do you see any exceptions/errors?
I don't see anything in this demo that couldn't work in IE9.

Comment 13

[Laura Mesa [:lmesa] [:lvmesa]]

Thanks Paul--I am renaming the bug to make sure we support IE9, Chrome, Fx 4+ (including nightly and aurora). 

There is nothing in the code that will not allow us to support those browsers.

Comment 14

[Matt Brandt [:mbrandt]]

(In reply to comment #12)
For IE9
> What's wrong? Do you see any exceptions/errors?
I'm not seeing any exceptions being thrown in the browser or by it's console, although I might be using the developer tools incorrectly or the wrong tool altogether for diagnosing this. Here is what I'm seeing.

- I am unable to submit new marks.
- When I browse marks, the pre-existing marks don't render on the screen.

This is what is output in the console for both of the about cases:

HTML1113: Document mode restart from Quirks to IE9 Standards en
LOG: [object Arguments] 
LOG: [object Arguments] 
LOG: [object Arguments] 

> I don't see anything in this demo that couldn't work in IE9.
That's great! It'll be great to have the app looking splendid in IE9 (comment 13).

Comment 15

[Adam Miller]

That's not a CSS problem. Something with the javascript is not executing correctly in IE9. There's code that's run on ready that hides bits of that content, and repositions other parts. I don't have a good way of testing IE9 currently, but I'm working with our IT guys to remedy that. 

Paul - no clue why you're seeing the fallback content. Do you see any errors in the console?

Comment 16

[Paul Rouget [:paul]]

(In reply to comment #15)
> That's not a CSS problem.

I see layouts problem here: attachment 528603 [details]

> Something with the javascript is not executing
> correctly in IE9. There's code that's run on ready that hides bits of that
> content, and repositions other parts. I don't have a good way of testing IE9
> currently, but I'm working with our IT guys to remedy that. 
> 
> Paul - no clue why you're seeing the fallback content. Do you see any errors in
> the console?

I don't know, I don't have a windows box right now, but maybe this can help: http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Comment 17

[Adam Miller]

This should be all patched up. Just finished testing in IE9, Chrome, FF4 and Safari, and, after a slight tweak to the way I get mouse position, it is working consistently between all of them. 

https://github.com/mozilla/markup/commit/60220879183bad059d17010a0cf87b7182293b17

Comment 18

[Matt Brandt [:mbrandt]]

Bumping this to FIXED per comment 17. I'd suggest opening separate bugs on a defect by defect (and browser by browser basis).

QA is currently working to verify the this bug.

Comment 19

[Matt Brandt [:mbrandt]]

Verified on:
+ OSX
 - Firefox 4.0.x
 - Safari 5.x
 - Chrome 11.x