Why there is an unintended margin-right in Safari5?

Question

I am curious about an odd rendering behaviour on Safari 5.1. In a two-column layout, the first column has a fixed width, and the second one should take the remaining part.

HTML:

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

CSS:

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

This works great on most browsers (on all "modern" browsers, as I thought), but now I found out, that Safari 5 adds an unintended right margin on the second column of the same width as the intended left margin (as if there were a .right { margin-right: 100px; } rule).

http://jsfiddle.net/MvF3V/1

Most Browsers:

enter image description here

Safari5: (tested on 5.1.7, but it occurs also on 5.1.9)

enter image description here

When I remove the overflow: hidden; it works fine, but I need that for other inside elements.

My questions is not how to rearrange this little example, but:

Is this a Safari-5-Bug, or are my CSS rules somehow wrong, even if they "work" on most browsers?
If it is a Bug, does it have a name, with which I can google some workarounds?
Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.

Update: The standard Android browser (Galaxy S3, AppleWebKit 534.30) seems to use the same old webkit engine. The same strange right margin appears: http://jsfiddle.net/MvF3V/1/embedded/result/

@Era: Exactly. I like to clear floats with `overflow: hidden;`. I could use a clearfix solution, but still I am curious, why this strange rendering occurs. — Beat Sprenger, Jan 17 '14 at 10:51
this might be a bug of safari. yes you can do this alternate http://jsfiddle.net/MvF3V/2/ — Richa, Jan 17 '14 at 10:54
@BeatSprenger : `This works great on most browsers`...what do you mean by this??? i doubt its a browser bug....can you elaborate more on highlighted part, because your are not using any css3/vendor-prefix, so it *should* work on all browsers!! — NoobEditor, Jan 17 '14 at 11:00
@Era : general tip, bff....`hard-reset` is never suggested, as you have shown in ur fiddle!! :) — NoobEditor, Jan 17 '14 at 11:01
@BeatSprenger : check if this fiddle runs fine on safari,if so....you have a css issue in your current markup => http://jsfiddle.net/szMRH/1/ — NoobEditor, Jan 17 '14 at 11:04
@NoobEditor: This would work, but this is not responsive with its parent div. btw well accepted your tip. thanks. — Richa, Jan 17 '14 at 11:11
@Era: Yes, thanks. This works. That's most probably the way, I will change the markup, so that I looks good in Safari5 as well. — Beat Sprenger, Jan 17 '14 at 12:32
@NoobEditor: With `this works great on most browsers` I try to say on all browsers, including Safari 7 and Safari 6, but not on Safari 5 (which still is the most popular safari version according to gs.statcounter.com). I also doubt that this is a browser bug, therefore I am looking for explanations, which I cannot find anywhere. Of course there are workarounds, like @Eras solution. I am curious, if someone else knows about this issue. If not, you and Era are free to formulate your workarounds as answers, which I can then accept... Thanks a lot! — Beat Sprenger, Jan 17 '14 at 12:41

score 3 · Answer 1 · answered Jan 17 '14 at 12:33

3

Give a

padding-left: 100px;

instead of

margin-left: 100px;

answered Jan 17 '14 at 12:33

Ravi Gadhiya

390
3
15

But this will add a padding inside my right column (see http://jsfiddle.net/MvF3V/3/), which is not what I want. I set `margin-left: 100px` to avoid that the content of the right column floats around the left column, if the right column is higher than the left one. – Beat Sprenger Jan 17 '14 at 14:32

score 0 · Accepted Answer · edited May 23 '17 at 12:19

This seems indeed to be a bug in older Webkit versions. I found another question about the same issue.

There are workarounds. The most obvious is to avoid overflow: hidden to clear floats, and to use clearfix instead.

Since nobody answered to my questions, I try to give them myself:

Is this a Safari-5-Bug?

It's a Webkit Bug

If it is a Bug, does it have a name, with which I can google some workarounds?

No name found, apparently there are not many people who layout websites as I do... (and still want to support old browsers).

Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.

If you really want to define exceptions, you can make such ugly things in JavaScript

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
    var webkitVersion = parseFloat(webkitCheck[1]);
    if (webkitVersion < 535) {
        jQuery('html').addClass('oldWebkit');
    }
}

< 535, because 534.59.10 is the Webkit version of the latest Safari5 version, and in Safari6, this bug does not occur anymore.

But thanks, @Era and @NoobEditor for your comments.

Why there is an unintended margin-right in Safari5?

2 Answers2