Safari bug, part 2

“Challenged”:http://www.momathome.com/viewfromhome/macintosh/interesting_safari_bug_seeing_double.php by Eric Albert to actually figure out what’s going on and file a bug report, I did some testing and did indeed find out what is causing the “Genjokoan”:http://genjokoan.com/index.html page to see double in Safari.

See a “test page”:http://www.momathome.com/safaribug/test1.html I made here. The code couldn’t be simpler:

bq. <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!–
#outsidecontainer {
position: relative;
left: 25px;
}
#insidecontainer {
float: left;
width: 300px;
}
–>
</style>
</head>
<body>
<div id="outsidecontainer">
<div id="insidecontainer">
This is a test
</div>
</div>
</body>
</html>

I duplicated the original XHTML Strict Doctype, but the ghosting also happens with a Dreamweaver default XHTML Transitional Doctype, too.

It appears to me that although it’s valid XHTML/CSS, Safari doesn’t like it when a floated div is inside a relatively positioned div with a left: rule. Changing the left: 25px; line to margin-left: 25px; eliminates the bug as does removing the position: relative; or the left float of the insidecontainer div. The problem also disappears when a div with the rule clear: both; follows the insidecontainer div as it currently stands.

If this were my page I would use margins before positioning like this. But it appears as if Safari is rendering the page with and without the left: positioning at the same time.

Better, Eric?

P.S. Eric didn’t actually challenge me, I just decided to take it that way. 🙂 I’ll file this officially with Apple tomorrow when I’m a little more awake.

Update: “Philippe Wittenbergh”:http://emps.l-c-n.com/ “confirms” that it’s a bug “in both Safari and Omniweb”:http://dev.l-c-n.com/safari/duplicate_float.php

bq.. It is a Safari bug. And if the relative positioned block is followed by a *static* block level element, then the duplicating effect disappears as well, even without a clearing element. Omniweb5 exhibits the same problem (hardly surprising).

Bug filed with Apple, although I suspect that this is already fixed for the soon-to-come Safari version 1.3.

p. And there you have it. 🙂

6 Comments

  1. Eric says:

    Wow. Yes. Much better. Thanks for putting this together!

  2. It’s not fixed in 1.3b, no.

  3. Eric says:

    Erik, the Safari 1.3 beta is under NDA. You should know better than to mention it here….

  4. Philippe says:

    Uh, Judy, there is a little typo in my name…
    (Wittenbergh) (_~_).

    Sad to hear about 1.3b. When that is out, we’ll hit the bug button.

    p._/_

  5. Judi Sohn says:

    Sorry about that, Philippe! It’s fixed now. 🙂

Comments are closed.