overflow:hidden isn't creating a new block formatting context on iOS safari

Question

I'm trying to write a stylesheet that styles the following html

body > * {
    width: 49%; /* should be 50% */
    display: inline-block;
    text-align: center;
    overflow: hidden;
    margin: 0;
}

body {
    margin: 0 auto;
    line-height: 0px;
    width: 80%;
}

<html><body>
<span><h1>some text here</h1></span>
<img src="img.png"></body></html>

But on iOS Safari, the bottom margin from the h1 expands past the baseline and (in the full version, that has multiple rows), pushes down the rest of the content. If I use overflow: scroll, this fixes it for Safari, but on other browsers messes up the view. How can I detect that this is Safari and fix it or use a different way to construct the block formatting context? I would prefer not to use Javascript, but I think that there's a chance I'll have to.

safari / ios won't allow it on a body tag, make a
wrapper just inside the body and apply all your styles there — Cameron, Aug 22 '20 at 15:46

score 0 · Answer 1 · answered Aug 22 '20 at 15:09

0

Does overflow:hidden applied to <body> work on iPhone Safari?

body > * {
  position:relative;
  overflow:hidden;
}

answered Aug 22 '20 at 15:09

markcc

533
2
9

This does not fix the issue. – Holden Rohrer Aug 22 '20 at 15:09

score 0 · Accepted Answer · answered Aug 22 '20 at 21:45

The issue is NOT the block formatting context. Instead, it's the vertical-align: text-bottom that Safari defaults to. vertical-align: text-top fixes my issue by forcing the inline-blocks to align their upper baselines (which are located strictly above the text's margin or padding) rather than lower baselines which vary based on the bottom element and what margin it has, even though the margin isn't "leaking" out of the element.

overflow:hidden isn't creating a new block formatting context on iOS safari

2 Answers2