Margin percentage different in Safari than Chrome/Firefox

Question

I'm encountering this weird bug in Safari and it's really annoying because I can't find a solution. I've looked at similar questions on StackOverflow and on the internet but none solved my question.

The example in question is on http://jsfiddle.net/WQnVu/5/. So basically I have an image (here it's a of a fixed size) and two containers: one inner and one outer. The image is absolutely positioned relative to the outer container. To reposition the image relative to the width of the outer container, I then do a negative percentage margin-top. The code is as follows.

<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
</div>


.outer {
    height: 510px;
    width: 1024px;
    background-color: red;
    position: relative;
}

.inner {
    height: 100%;
    width: 100%;
    background-color: blue;
 }

 .image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 65%;
    right: 0;
    margin-top: -26%;
    background-color: green;
}

The margin percentage is supposed to be relative to the width of the containing block of the image (in this case the inner container). This is indeed the case for Firefox and Chrome. In Safari however, it calculates the margin relative the height of the block itself, thus relative to the height of the image!

I have no idea how to solve this issue. I really need the margin percentage because the site is responsive. The width of the containers is changing accordingly but the height remains constant. That's why I need something that is relative to the width of the containers. If there's a hack to specifically target Safari I'd happy to use it but as far as I know there's no such thing.

It would be great if someone can think of a way to solve this.

Kind regards,

Yoran

You say the widths are changing often, but you have them set in px. How are they changing? Is this just an example to illustrate the issue? — ralph.m, Apr 30 '13 at 08:52
It looks like safari does not like using `%` for things like `margin-top` you could use a bit of jquery to work it out in `px` so it could sit where you want it using `$('.inner').height();` — Andrew, Apr 30 '13 at 08:58
This is just an example, in reality the width of the outer container is indeed a percentage. Is there a way to target only Safari in Javascript? — yorbro, Apr 30 '13 at 10:35

score 5 · Accepted Answer · edited Sep 15 '14 at 13:02

5

Have you simply tried to use padding-top instead of margin-top?

I had the same problem and I fixed it in this way.

edited Sep 15 '14 at 13:02

Regent

5,142
3
21
35

answered Oct 16 '13 at 11:10

Marco Melluso

402
4
7

score 1 · Answer 2 · answered Jun 05 '13 at 15:07

If you need to calculate margin-top or margin-bottom based on a width in Safari, you can use vw (viewport width) combined with calc (if necessary) to set it. Both of these are supported well in Safari for Mac and iOS. Just leave a fallback for other browsers:

HTML:

<div id="container">
    <img src="image.png" />
</div>

CSS:

#container {
    height: 500px;
    width: 50%;
}
#container img {
    margin-top: 20%; /* Fallback */
    margin-top: calc( 50vw * .2 );
    max-width: 100%;
}

score 0 · Answer 3 · answered Apr 30 '13 at 08:57

0

If the heights remain constant, you could do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {
    height: 510px;
    width: 70%;
    background-color: red;
    position: relative;
}

.inner {
    height: 100%;
    width: 100%;
    background-color: blue;
 }

.image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -190px;
    background-color: green;
}
</style>

</head>
<body>

<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
</div>

</body>
</html>

answered Apr 30 '13 at 08:57

ralph.m

13,468
3
23
30

This would work fine if the image has fixed dimensions. For the purpose of the example, this is the case, but in the actual problem the image scales with its container. The widths and heights should actually be max-width and max-height. – yorbro Apr 30 '13 at 10:36
OK, I'm still not really clear on all the parameters here. Do the outer container's width and height need to be flexible, as well as the inner div and the image? Does the image always need to be flush with the right hand side, and does there always need to be equal space above and below the image? And is the inner div even needed? – ralph.m Apr 30 '13 at 13:03
Hi Ralph. _Do the outer container's width and height need to be flexible, as well as the inner div and the image?_ Only the outer container's width is flexible, the height stays constant. The same holds for the inner div. The image scales (both width and height) in the same way as the width of the containers scale. _Does the image always need to be flush with the right hand side, and does there always need to be equal space above and below the image?_ Yes. _And is the inner div even needed?_ In this example no, but in the real problem it does have a function. – yorbro May 01 '13 at 09:19

score 0 · Answer 4 · answered Jul 12 '13 at 04:44

I'd suggest a JS solution that targets only Safari, gets the width of your .outer, calculates a margin-top based on that width and applies it to your .image.

Like this:

        var width = $('.outer').width();    // get width of .outer
        var topMargin = width * -0.26;     // calculate -0.26% of .outer's width

        // check if the browser is Safari
        if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {                  
            $('.image').css('margin-top', topMargin+'px');  // apply the calculated margin to .image
            }
        else {
        };

Had some trouble using JS Fiddle - I think it gets in the way of detecting the browser. See an example page here.

Hope that helps.

Also, if your site is responsive and the .outer width is likely to be changing, I'd consider using $(window).resize... — Luke, Jul 12 '13 at 04:46

score 0 · Answer 5 · edited Sep 17 '20 at 06:59

0

I had the same problem! Instead of using JavaScript to get the viewport width just use calc in CSS and do viewport units times by the percentage in decimal form.

margin: calc(100vw * .50);

edited Sep 17 '20 at 06:59

Lauren Yim

12,700
2
32
59

answered Sep 17 '20 at 04:45

Kevin Seabourne

1

Margin percentage different in Safari than Chrome/Firefox

5 Answers5