Question

I’m having a fairly complicated layout issue that only occurs on Webkit browsers. Have a look at this screenshot:

First, allow me to explain what I am trying to do here. The purpose of this layout is to show a grid of images, with each grid cell being square. The layout is responsive, so on another viewport width, there may be 3 images per row instead of 2.

Technically, the markup is a list of figures, and within each figure is a link, and within the link is the actual image. Pseudo markup:

<ul>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
</ul>

As you can see, the innner image does not have any width. This is intentional, because the width is set on the li element, which I use as the image container. In the example viewport as seen in the screenshot, the width of the li element is set to 50%.

Next, during runtime, I hide the img element alltogether and set its src path as background image on the “a” element. The purpose of this is to center the image correctly, regardless of the image’s dimensions or aspect ratio.

Major note: I am using box-sizing:border-box on all elements.

Now, during this runtime routine I also calculate the height of the “li” element dynamically in order to enforce it to be square. Let us assume for a moment that the example screenshot has a viewport width of 400 pixels. Since all “li” elements are set to have a width of 50%, they should have a width of 200 pixels. Knowing this, I simply set the height of this “li” element to 200 pixels as well, making it a square container:

// applied to all "li"s in the list
$(this).height($(this).width());

This works perfect in every browser I tested, except for Webkit browsers (Chrome, Safari). When I output the width of the “a” (or li) element before setting it, both the width and the CSS width, non-webkit browsers will report the exact same width for every “a” element. When I look at the console in webkit browsers, there are variations in their widths. One “a” element may be 200px whilst the other is 191px. The actual values and whether it occurs at all depends on the viewport width of the browser so it seems.

Either way, the result are the ugly gaps you see in the screenshot. What happened is that due to webkit unexpectedly reporting different width for these “a” containers (although they are all set to 50%), the height will also have varieties, causing the gaps.

The big question therefore is: why does webkit report incorrect and different widths for “a” elements that are all set to 50% of the same parent, whilst other browsers don’t?

Theories so far

Hereby a few things investigated so far:

I am using inline-block on the li elements, which is known to cause additional “space”. I have solved this by removing the whitespace from the markup. Either way, inline-block is not the issue, since when I change the “li” elements to float, webkit browsers still show different widths when they shouldn’t.

Another theory has to do with the order of loading things, where some claim delaying my image background runtime routine to the window.load event may help. Unfortunately, the result is exactly the same.

I’m also aware of the difference between .width() and .css(“width”) in jQuery (I’m using 1.8.2). It does not make a difference, since I output both on the console, and Webkit gets both values wrong.

Summarizing

Sorry for the long explanation, hereby a summary: I set a width of 50% (or 33.3333%, depending on the viewport width) on list elements and then retrieve the actual pixel width during runtime. For some mysterious reason, webkit browsers report different widths, allthough all the list elements have the same percentage width.

Finally, here is a live link of the issue:

[removed, due to issue solved and live code changed now]

To reproduce the issue, you have to use a webkit browser and resize your window roughly to that of my example screenshot. It seems to happen at arbitrary viewport widths.

Answer 1

It looks to me like it has to do with whether or not the pixel width of the viewport is divisible by 2 or 3. In cases where the width:50% and $(document).width()/2=0 then there is no issue, but when $(document).width()/2=1 then the gap appears.

So instead of calculating the height for each perhaps you can calculate it once and use it each time, i.e. change imageLayout() to:

var aHeight = $('.photos li figure > a')[0].width();
$('.photos li figure > a').each(function(index) {
    console.log('w: ' + $(this).width() + " css w: " + $(this).css("width"));
    console.log('pw: ' + $(this).parent().parent().width() + " css pw: " + $(this).parent().parent().css("width"));
    $(this).height(aHeight);


    if ($(this).attr('data-loaded') != "1") {
        var imgcaption = $(this).parent().find('figcaption a');
        imgcaption.html('<em class="icon-bolt"></em> loading...');
    }

});