h2 elements all bunched up on top image on iOS & Firefox

Question

On the site Codexr.io I am noticing that while the h2 elements work on any size browser for Chrome, however I am seeing with iOS Safari and Firefox, all of the h2s are on top of one another in one of the main images.

Here's the HTML:

<div class="content">
    <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
    <h2 class="top-area-text">Collaborative</h2>
</div>

And the CSS:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

Is there something I'm missing? Why is Chrome working but Firefox and iOS not? Is something malformed?

Answer 1

The problem is the position: absolute; without a position: relative; on a parent div. I don't know why it is not happening in Chrome. Perhaps something is cached? I have the problem on your site in Chrome as well.

According to Mozilla absolutely positioned element are positioned relative to their closest positioned ancestor:

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

Adding this code in the Chrome inspector solves the problem on my end:

#top-area .content {
    position: relative;
}

This basically replicates the issue on your site and shows how to resolve it:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

/* Remove this code to reproduce the issue on your site. */
#top-area .content {
    position: relative;
}

<div id="top-area">
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Collaborative</h2>
    </div>
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Test</h2>
    </div>
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Test2</h2>
    </div>
</div>

Answer 2

Because position: absolute; not reflect without a position: relative; on a parent div. You need to set position:relative in parent div. For that you need to add relative position in .block div.

I have also checked in Chrome its show same as Firefox. I think you have cache issue in your Chrome browser, just remove the cache and check it again.

#top-area .block {
  position:relative
}

I just copy paste your code here:

body {margin: 0;}
#top-area .column {
    color: #fff;
    float: left;
    min-height: 260px;
    overflow: hidden;
    padding: 2% 0 0;
    text-align: center;
    width: 100%;
}
#top-area .block {
    margin: 0;
    position: relative;
}
.column p {
    margin: 0;
}
#top-area .column img {
    display: block;
    height: 350px;
    object-fit: cover;
}
#top-area .top-area-text {
    position: absolute;
    color: white;
    font-size: 3em;
    left: 0;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-transform: uppercase;
    top: 3em;
    width: 100%;
}

<div id="top-area">
    <div class="page-wrap clearfix">
        <div class="column one">
            <div class="region region-top-first">
                <div id="block-block-1" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/professional"><img alt="" src="http://codexr.io/sites/default/files/office-2480354.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Professional</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
        <div class="column two">
            <div class="region region-top-second">
                <div id="block-block-2" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/collaborative"><img alt="" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Collaborative</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
        <div class="column three">
            <div class="region region-top-third">
                <div id="block-block-5" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/contact"><img alt="" src="http://codexr.io/sites/default/files/cup-of-coffee-1280537.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Contact Us</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
    </div>
</div>