tomwoods.com - layout is messed up

[webcompat-bot]

URL: http://tomwoods.com/
Browser / Version: Firefox Mobile 39.0
Operating System: Android
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://tomwoods.com/
2. …

Expected Behavior:

Actual Behavior: The layout is seriously messed up on mobile.
http://vidble.com/show/ciNX50t1rT.png

[hallvors]

This is a curious issue.

Some text is set as white and an IMG element is supposed to be rendered behind said text to make it visible. The text has max-width: none and max-height: none:

<img src="http://tomwoods.com/wp-content/themes/tomwoods/images/home-featured.jpg" style="position: absolute; margin: 0px; padding: 0px; border: none; width: 4119.22px; height: 1511px; max-height: none; max-width: none; z-index: -999999; left: -1872.11px; top: 0px;">

If the max-width and max-height none rules are removed in Chrome, the image shrinks and the text hence disappears.

[hallvors]

This might be yet another variation on https://bugzilla.mozilla.org/show_bug.cgi?id=823483 .. Maybe @karlcow can make sense of this CSS?

[karlcow]

I don't think it's a max-width issue or not immediately at least

In Blink I see this markup structure:

<div class="home-featured" style="position: relative; z-index: 0; background: none;">
    <div class="wrap"></div>
    <div class="backstretch"></div>
</div>

with div.backstretch being:

<div class="backstretch" 
     style="left: 0px; top: 0px; 
            overflow: hidden; 
            margin: 0px; padding: 0px; 
            height: 1320px; width: 360px; 
            z-index: -999998; 
            position: absolute;">
    <img src="http://tomwoods.com/wp-content/themes/tomwoods/images/home-featured.jpg" 
         style="position: absolute; 
                margin: 0px; padding: 0px; 
                border: none; 
                width: 3598.53px; height: 1320px; 
                max-height: none; max-width: none; 
                z-index: -999999; 
                left: -1619.26px; top: 0px;">
</div>

while in Gecko, I get:

<div class="home-featured">
    <div class="wrap"></div>
</div>

So the image is not even there at all.

The site is using flexslider which seems to have issues being initialized.

@hallvors do you get the same markup.

[karlcow]

fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=823483