1152751 - Deceeu.ro elements are mis-displayed - junky panning

Status: RESOLVED DUPLICATE of bug 478834

(Web Compatibility :: Site Reports, defect)

Description

[Ioana Chiorean]

Attachment: deceeu.jpg

Firefox for Android 40 ( Nightly)
Nexus 5 - Android 5.1

Steps:
1. Go  to deceeeu.ro 
2. Pan around and zoom 

Expected results:
- the page elements should be displayed without any visual error

Actual Result:
- the video frame is right aligned, after panning the page has visual errors and displayed white left column

Note:
- Works fin in Chrome

Comment 1

[Hallvord R. M. Steen [:hallvors]]

My guess is it's caused by a CSS float issue where the logo is supposed to be to the left of the video if there's enough space - and here there isn't but it's rendered on the left anyway, making the page extend into white on the right beyond the background image.. to be analyzed.

Comment 2

[Hallvord R. M. Steen [:hallvors]]

<div class="col-md-4">
        <img class="pull-left panorama_logo" src="http://deceeu.ro/frontend/img/home/panorama_logo.png" alt="">
        <div style="margin-top: 240px;" class="content">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=pU3FukXdiBk" title="">
            <img class="img img-responsive" style="margin: 0 auto;" src="http://deceeu.ro/frontend/img/home/trailer_pic.png" alt="">
          </a>
        </div>
      </div>

The pull-left class styling is simply 

.pull-left {
    float: left !important;
}

and disabling it fixes the problem, so yes, with or without the !important, Gecko will float the panorama_logo image to the left of the trailer_pic, causing the non-alignment and the sideways panning problems. I don't know the exact algorithm but it seems Firefox is getting it wrong.. Perhaps Daniel can confirm and mark it as dupe of some master bug?

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 4

[Daniel Holbert [:dholbert]]

I think this is the same as bug 1073574, which is a dupe of bug 478834.

Those bugs mention tables, but IIRC it's not a table-specific issue -- it's a bug that affects any block-level content which is not actually a block. (In this case, we have <img style="display:block">, which is a block-level image.) Bug 1073574 comment 8 mentions block-level <img>, in fact.

Marking as a dupe of bug 1073574's dupe-target.

Comment 5

[Daniel Holbert [:dholbert]]

Sorry -- so that's the layout issue. Just noticed this is a Tech Evang bug, though, so I'll leave it open with a dependency, so we can reach out to the site to suggest a workaround here.

Comment 6

[Daniel Holbert [:dholbert]]

I think the site can work around this issue (bug 478834) by putting "clear:left" on the trailer-pic image -- this image element here:
<img class="img img-responsive" style="margin: 0 auto;" src="http://deceeu.ro/frontend/img/home/trailer_pic.png" alt="">

If I add "clear:left" to the style attribute there, then it fixes the Firefox rendering to match Chrome (and it doesn't affect the chrome rendering).

Comment 7

[Hallvord R. M. Steen [:hallvors]]

There's a bug on webcompat.com (918) which we can use for the outreach - unfortunately we did a bit of double work on the analysis since it was reported in both trackers but I guess we want both Gecko and the site fixed ;)

Re-closing this as dup, following up on webcompat.com