Weird margin-bottom behavior with Safari on iOS

Question

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.

Answer 1

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