1411558 - Bad top offset for abspos images on mobile.twitter.com's fullscreen image viewer

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[Florens Verschelde :fvsch]

Attachment: twitter-lite-image-centering-bug.png

On Twitter Lite (aka mobile.twitter.com) expanded images are shown to the top of the screen and half-hidden, instead of being centered.

See for example:
https://mobile.twitter.com/m_gol/status/921394040351969280/photo/1

The DOM structure they use is a bit complex, but roughly it looks like:

<div class="outer">
    <div class="inner">
        <div class="image" style="background-image: url(...); ">
            <img alt="..." src="...">
        </div>
    </div>
</div>

.outer {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
}
.image {
    bottom: 0;
    height: auto;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    background-size: contain;
}
/* image hidden behind its container */
.image img {
    position: absolute;
    z-index: -1;
}

If I had top:0; to the .inner block, then it's shown correctly.

This issue affects Firefox 56 and 58, and doesn't affect Chrome.

Comment 1

[Pascal Chevrel (relman team) -> :pascalc]

Confirmed in Firefox 56 and Nightly 58 on Linux and Windows. Chrome and Edge do not have this display bug.

Comment 2

[Adam Stevenson [:adamopenweb]]

Florens - Does this issue still reproduce for you? I'm not seeing it in Firefox 60 for Linux. The expanded image has a larger dark grey background around it for me.

Comment 3

[Florens Verschelde :fvsch]

Thanks for following up.
Twitter changed their code and I didn’t have a reduced test case, so I’m resolving as invalid.