Closed Bug 1152751 Opened 5 years ago Closed 5 years ago

Deceeu.ro elements are mis-displayed - junky panning

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set

Tracking

(firefox40 affected)

RESOLVED DUPLICATE of bug 478834
Tracking Status
firefox40 --- affected

People

(Reporter: chiorean.ioana, Unassigned)

References

()

Details

(Whiteboard: [suggested workaround in comment 6])

Attachments

(2 files)

Attached image 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
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.
<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?
Flags: needinfo?(dholbert)
Attached file testcase 1
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.
Status: NEW → RESOLVED
Closed: 5 years ago
Depends on: 1073574
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
Duplicate of bug: 478834
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.
Status: RESOLVED → REOPENED
Depends on: 478834
No longer depends on: 1073574
Resolution: DUPLICATE → ---
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).
Whiteboard: [suggested workaround in comment 6]
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
Status: REOPENED → RESOLVED
Closed: 5 years ago5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 478834
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.