Safari: A Modern Browser

Ok, this is one of my ranting posts.  It's been a bit since I ragged on Safari.  The main reason I feel the need to do so is:

1) the assinine Mac commercials that make out like the Mac and its software are superior to anything else

2) an article I read on Ajaxian months ago where developers were invited to comment on Safari... after about a dozen or so developers (who think like me) had commented... then the Mac-faithful descended and glowingly declared that Safari was at least on par...

[Despite the rant, if you got a solution I would love to hear it]

So I just finished working on a new Ajax Behavior called LayoutSpanBehavior (in MS Ajax).  It simply lets you define a group of divs/spans/table cells as able to work together to render text to the screen.  The moment one HTML Element overflows then the next one takes over.  The way they operate together is pretty cool... So nothing needs to be contiguous and you can create some freaky looking layouts if you want (and the browser figures out where to break up the text).

My initial version uses the "watch/unwatch" on HTML statements (Mozilla-based) and the onpropertychanged event (IE) to monitor the innerHTML, and innerText properties of all the elements for changes and then takes the new text and lays it out across all the elements in your layout (it's very cool!)

So since my client is a Mac guy I decided I had better try this in Safari <sigh />.

Where do I begin... Ok, neither the watch/unwatch nor the onpropertychanged events exist, and there is no alternative that I can find (since Apple in their infinite wisdom doesn't publish a javascript reference to their browser... they refer you to a JavaScript 1.2 reference and then tell you that they implement parts of JavaScript 1.3.  I just want to know what I can do in your %^&**&^ (simulated swearing) browser, so I can work around the issues.

To solve this I create a new method on all the elements called set_text.  This works, but I'd rather let the user be able to work without having to remember anything (and if Safari is not necessary then you are set).

Now if that weren't bad enough.  My original examples used a table with the CSS table-layout set to fixed, and an L shaped text region (with an extra cell marked with the text IMG to simulate an image here).  All cells have heights and widths applied to them (which means that they should hold the supplied height/width regardless of the actual content). 

The moment text gets written to the upper left hand cell, the "IMG" cell shifts and it occupies about half the space of the left upper hand cell (BTW, the "IMG" cell should the the right upper hand).  When I turn on borders it shows that the position where everything should be... but Safari insists on rendering this strangely. 

I ended up switching to a div-based example (but the original layout is still in the original example and will continue to be when this gets released... it's available in the source for the codeplex DTAjax project).

But let's go back to the Table problem.  If I were a betting man I would say the problem is the table-layout style (which is, BTW, required by IE and Mozilla).  Even if this were the case there is no reason for Safari to render something this poorly.  This is not alternate formatting... this is incorrect.  Tables have been around for a while now... So why does Safari rend this way when no other browser does?

Easy... When the Apple Engineers started with Konqueror (which uses the Mozilla render engine), they decided that for some reason they didn't like the rendering engine for Tables... so they rewrote it (and now it's better because Apple built it).

Now, mind you, Safari has a number of nice debugging features (none of which are on the top of favorite web-based debugging tools...), but the standards of the browser are poor... actually I would say that Safari is on par at least with the 5.0 browsers (that would be Mozilla FireFox 0.5-0.8 and IE 5/5.5).  I come up with 5.0 because it's better than any of the 4.0 browsers (just barely).

That said, IE 5/5.5 was a long time ago... we are now 2 iterations of browser beyond this.  And, we are not talking about emerging technology here.  When IE 2 was going head to head with NS 2, IE was really just a version behind... IE3 and NS3 were a lot closer together (feature-wise NS was still ahead, but the browsers were closer in what they were enabling).

Raise your hands if who would like to build web apps that support NS4 and the more recent browsers?  No one?!!?  What's wrong with you?  NS4 is/was a widely used browser!  How about IE4?  (I see a few of you)...

<My final shot across the bow /> Hey Apple!  The name of the object is XMLHttp!  It's an industry standard at this point.  Why don't you support the XML part of that equation?

[tags: Safari, Mac, Mac Love, Safari Love, Ajax, Browser Rendering]

Print | posted on Tuesday, May 08, 2007 1:30 PM

Feedback

# re: Safari: A Modern Browser

left by at 5/8/2007 2:00 PM Gravatar

I have no particular love for Safari either, but I did want to clarify one point.  Safari is based on the Konqueror browser for KDE, but that doesn't use the Mozilla engine -- it has its own separate engine.  I believe Apple calls it WebKit, but I don't know if that's what the Konq folks refer to it as.

Not really nitpicking, just wanted to clarify on why it doesn't behave like Firefox does.  :)

# re: Safari: A Modern Browser

left by at 5/8/2007 2:11 PM Gravatar

Jay do you have an example page that we can look at?  I'm not following "when one overflows the next takes over" and "freaky layout possibilities." In design circles at least the xhtml table element is supposed to be used for tabular data, not page layout.

# re: Safari: A Modern Browser

left by at 5/8/2007 2:37 PM Gravatar

David,

I've heard all kinds of things... I had heard that Konqureror had used the Mozilla engine at one point and had developed in their own different direction (I was giving them the benefit of the doubt for not re-using code...)

Camera,

Here's the code from my example

<table id="coreTable" border="1" cellpadding="0" cellspacing="0" style="width:250px; height:400px; table-layout:fixed;">

<tbody>

<tr>

<td id="Layout1" style="width:150px; height:50px; vertical-align:top;  font: 7pt arial" attachedDiv="Layout2">

&nbsp;

</td>

<td id="img1">

IMG</td>

</tr>

<tr>

<td colspan="2" id="Layout2" style="vertical-align:top; height:350px; width:250px; text-align:justify; font: 16pt arial;">

2

</td>

</tr>

</tbody>

</table>

My code might take a bit more to look at.  Basically I break the text apart by sentences (first), slowly add each sentence to the table cell (using innerHTML) until the MS Ajax getBounds function tells me that I have too much text in the cell.  At which point, I remove the last sentence (I'm keeping a before and after snapshot), and break that sentence into words doing the same thing until I have filled that cell and then I move to the next on to the next one in my layout (as indicated by the "attachedDiv" attribute on the table cell with an ID of Layout1).

Anyway, the table layout goes all freaky rather quickly (not the first time I've seen Safari do this, BTW).

If you go to http://codeplex.com/dtajax/.  You can get most of the source.  I don't believe I'm OK to distribute the MS Ajax client source, so it's not included.  The name of the HTML file in the archive is called LayoutSpan-example.htm.  

(You'll need to remove the working set of demos with divs and uncomment out the table).

# re: Safari: A Modern Browser

left by at 5/8/2007 2:51 PM Gravatar

David is right. Safari is based off the rendering engine from Konqueror, the browser for KDE.

Mozilla's rendering engine is called Gecko, the engine from Konqueror and the one apple based Safari on is called KHTML. Apple calls their port WebKit. Here is the URL to the wikipedia article. en.wikipedia.org/.../KHTML

# re: Safari: A Modern Browser

left by at 5/8/2007 3:14 PM Gravatar

Apple should kill the safari engine and if legally possible, just put a "skin" on top of Firefox if they want their own browser.  I feel your pain man.  We had a project manager who kept telling us our stuff was broken, but it was only broken because she was using safari on the mac.  My boss laughed and said: "We're not supporting a browser that less than 1% of the world uses unless a client demands it."

And no i'm not a mac hater.  I'm a .NET developer writing this on my macbook pro.

# re: Safari: A Modern Browser

left by at 5/8/2007 3:29 PM Gravatar

Fregas,

The real thing we should be doing is telling every Mac user we know to check out the Mozilla Camino browser (nice looking Mac browser that uses the Mozilla Engine)... the problem is that many think that if its made by Apple it's by default better...

Jay

PS. I'm not really a Mac hater either, but I really wish they would either fix their browser or abandon it!

# re: Safari: A Modern Browser

left by at 5/8/2007 4:12 PM Gravatar

So the example table you posted above renders fine in Safari 2.0.4 with an XHTML 1.0 transitional doctype. What doctype are you using?

Also have you tried the webkit nightly to see if the problems have been fixed? Have you tested your hypothesis of Apple rewriting the table rendering by trying to load the page in a KHTML based browser?

"slowly add each sentence to the table cell (using innerHTML) "

Are you trying to use innerHTML on a table cell?

lists.apple.com/.../msg00124.html

There are alternatives to using innerHTML

slayeroffice.com/.../innerHTML_alternatives

domscripting.com/.../35

# re: Safari: A Modern Browser

left by at 5/8/2007 4:15 PM Gravatar

"I really wish they would either fix their browser or abandon it!"

They are trying, and in a much more transparent way than Microsoft. Can you download a nightly build of IE? Can you view the bug list and change log for IE?

http://webkit.org/

http://webkit.org/projects/compat/hitlist.html

I'm hardly a Mac apologist, but in this case Apple, in  my opinion, is doing a much better job of involving developers in building a browser and deserve a lot more credit than you're giving them.

# re: Safari: A Modern Browser

left by at 5/8/2007 5:09 PM Gravatar

Scott,

You are obviously an Apple Fan boy.  

Yes, I use innerHTML... it's supported in Mozilla.  Have you ever heard of the word industry standard?  I don't need a standards body to tell me what should be in the standard.

One of your articles states the real case.  innerHTML is fast!  I use it when it makes sense.  Having a slow interpretter render HTML seems like a really bad idea to me... which is what the document.createElement does IMO.  

In this case I'm using it because I want to pick up &nbsp; and &gt;'s as well as <br /> tags (and not have to parse the stream of HTML from Javascript).

The whole exercise was to create a method for rendering text into multiple screen regions with minimal effort on the designers part.

IMO Safari is just substandard to the industry.  I know that MS has introduced their own variants to the whole HTML... they learned that trick from Netscape.  Mozilla has done a couple things as well, so it ain't all MS (although admittedly MS has definitely blurred the waters back in the IE3/4 days).  

BTW, I noticed that you attacked the simpler table rendering issue and have avoided the other issues... like why doesn't the Safari browser's XMLHTTP object do XML?  Or where is watch/unwatch?  I know, I know... neither are a W3C standard... but again industry standards... if your browser doesn't do what everyone else's does then it's inferior in the consumers eye..

BUT, I know Safari has to be better because Apple made it...

# re: Safari: A Modern Browser

left by at 5/8/2007 6:24 PM Gravatar

"You are obviously an Apple Fan boy. "

The guy tries to help and you label him a fanboy? Not cool.

This URL claims that Safari does support XML in XMLHTTP  "developer.apple.com/.../xmlhttpreq.html" and a demo that shows it in action "developer.apple.com/.../example.html" - can't test it for you, I'm not on a Mac. Sorry.  You also probably need to make sure the XML it is retrieving has the proper content type (text/xml or whatever).

Most people who have issues when getting things to run on IE tend to try Quirksmode.org, or was it just more fun to try and incite Mac users by slamming something that most have no issues with - no, don't worry, I'm a fanboy - you can save your typing.

# re: Safari: A Modern Browser

left by at 5/8/2007 6:37 PM Gravatar

Jay, the effect you described seems quite interesting -- sounds like auto-flowing text that would allow for multi-column layouts or (for the capitalists out there) jumping article text over ads.

It does seem unfair to develop for a product when the product's team refuses to provide documentation.  But while you think about what to do, you can marvel at Apple's stunning industrial design.  :-)

# re: Safari: A Modern Browser

left by at 5/8/2007 6:44 PM Gravatar

It probably was a bit harsh, but the truth for me was that he was implying my use of innerHTML was the problem.  innerHTML does work on the Mac (as I have retested today).

It's more an issue that one expects that Safari operates somewhat close to the others.  Because when I do something in Mozilla, the result is very close in IE.

I use Aptana which has enhancements for Mozilla, so I develop in Mozilla.  When I go to IE from there, the problem is usually that IE is rendering something slightly off.  I don't expect something that looks radically different on Safari.

As far as the XMLHttp issue.  The reason why JSON is the language of Ajax is because the Mac's XMLHttp object didn't (and possibly still doesn't... I haven't looked at the article) provide the XML property (I forget the actual property right at the moment); this property provides an XMLDOM object that can be used to inspect the returned data.  Instead with the Mac one had to get the return text and then call some other method to get an XMLDom object (and that didn't always work)... and this from an object that works flawlessly in... you guessed it... Mozilla, and IE (BTW, the example I am thinking about was for my now defunct Ajax library which I also tested with Opera... guess what... it worked).

I guess I'm probably trying to stir something up (rather unusual for me)... I guess I'm sick of having to go through great pains for Safari compatibility (and I think more Mac users should consider using Mozilla Camino).

# re: Safari: A Modern Browser

left by at 5/8/2007 6:45 PM Gravatar

Camera,

you are baiting me... <grin />

# re: Safari: A Modern Browser

left by at 5/8/2007 6:47 PM Gravatar

RJ,

I just checked out your article... I can tell you that none of the major Ajax libraries support a version of Safari earlier than 2.02 (??) because their support for the XMLHttp object was abysmal until 2.02.

# re: Safari: A Modern Browser

left by at 5/8/2007 6:54 PM Gravatar

Jay, that doesn't surprise me, but it does show that Safari *is* improving :) even if the original version was none too good (CONTENTEDITABLE was also not supported until recently). This also shows why OSX gets faster and faster with each release, nothing to do with excellent code, more to do with 10.1 being an absolute dog and later versions could do nothing but get better.

Safari is still young, and IE (and FF) were once also incomplete, you won't have to battle it for too long I am sure.

Posted from Safari - where your blog renders beautifully >:)

# re: Safari: A Modern Browser

left by at 5/11/2007 3:40 PM Gravatar

First off its 2007 man, you should be using table based layouts anymore :P

Secondly, every browser has issues and its the price you pay for web development. For instance, IE 5-6 can't handle the CSS box model, i need to create a separate style sheet to adjust widths on my layout. IE has a hard time handling z-index's on elements in certain situations, like creating a drop down menu. IE can't handle CSS pseudo classess, why!!! Instead i have to use javascript for simple hover effects. The worst thing of all is the stupid selects bleeding through layers. <sigh /> And the list goes on...

# re: Safari: A Modern Browser

left by at 5/11/2007 4:29 PM Gravatar

Actually I use which ever Divs with Floats or tables will give me the least issues.  

Personally I do prefer the float method, but there is exactly one browser that implements this well and that is Mozilla... You forget to mention that sometimes you have to pass IE some hacky CSS strings so that it will properly line things up.

I hear you on the tables, but there's no consistency in this arena either.  

As previously mentioned I was venting my frustration at once again doing some HTML/Web 2.0 code and having it flawlessly work in FireFox and IE7 and then finding that not only didn't Safari look correctly... it was so radically different it wasn't even funny... that was my frustration.

I'm welcome to my opinion too... and that is that Safari is just not on par with ANY Mozilla browser... IE while certainly not standards compliant seems to work closer to Mozilla... at least the results between the 2 are closer in presentation (even when one does something weird)... Safari at times seems to do really, really strange things.

Title  
Name
Email (never displayed)
Url
Comments   
Please add 4 and 7 and type the answer here: