CODEWITHSUNDEEP
csscross-browsersafari
yorbro
yorbro

Reputation: 1137

Margin percentage different in Safari than Chrome/Firefox

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

Upvotes: 4

Views: 13850

Answers (5)

Kevin Seabourne
Kevin Seabourne

Reputation: 1

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);

Upvotes: 0

Marco Melluso
Marco Melluso

Reputation: 402

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

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

Upvotes: 5

Luke
Luke

Reputation: 5602

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.

Upvotes: 0

Joshua Carroll
Joshua Carroll

Reputation: 11

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%;
}

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

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>

Upvotes: 0

Related Questions