CODEWITHSUNDEEP
htmlioscsssafarimargin
Sylver
Sylver

Reputation: 2453

Weird margin-bottom behavior with Safari on iOS

I have something like this in my body (simplified)

<div id="container">
  <article>
    text
  </article>
</div>

with the css 

#container > article
  margin-bottom: 50px
  overflow: auto

article
  display: block

On all browsers the margin-bottom is displayed but Safari which seems to collapse it.

I read a lot about this issue, but the overflow: auto does not help right away or any other tricks.

Where things get actually weird is if I move the margin-bottom to the article definition in the css, in this case Safari displays the margin..

#container > article
  /* nothing remains here */

article
  display: block
  margin-bottom: 50px
  overflow: auto

This is not what I want since it affects all the article tags.

If someone could explains me this, and have a workaround to actually make Safari behaves as expected, that would be much appreciated.

Upvotes: 4

Views: 6181

Answers (3)

standac
standac

Reputation: 1097

Adding a non-breaking-space at the bottom of the HTML worked for me:

<div id="container">
    <article>
        text
    </article>
</div>
&nbsp;

Upvotes: 1

SN3KA
SN3KA

Reputation: 45

Well instead of a margin-bottom on the element directly you could use this:

#container > article:after {
height: 50px;
content: "";
position: absolute;
width: 100%;}

Upvotes: 4

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

I experienced this on other browser as well. It seems that the margin-bottom does not work "if there is nothing to bounce from".

My solution always was to add a small padding to the parent element. Then the margin bounces on the padding.

So try adding:

#container {
  padding-bottom: 1px;
}

Upvotes: 5

Related Questions