Search code examples
jqueryhtmlcsssafarimasonry

Safari float or sizing issue for tiles

I've been mocking up this portfolio in CodePen and it is working beautifully... except for in Safari.

http://codepen.io/tpalmer75/pen/FijEh (SASS for just one .item element)

.item
  width: calc(100% / 3)
  display: inline-block
  height: 0
  padding-bottom: 25%
  background-position: center center
  cursor: pointer
  overflow: hidden
  background-size: cover

I have tried messing with the CSS calc functions, the box sizing, the float, and more.Here is what it looks like in Chrome and Firefox.

chrome screenshot

And here in Safari:

safari screenshot

Any ideas?

Code: http://codepen.io/tpalmer75/pen/FijEh

EDIT

The problem is resulting from safari rounding down to a whole pixel for all percentages. How can I fix this, and only target Safari?

Solution

  • Here's two potential solutions to your problem:

    Use ems rather than percentages

    I have been able to overcome this issue by utilizing a technique similar to Squeezemod http://codepen.io/makerbox/pen/xksiK - it uses javascript to get the width and height of the browser window and then breaks it down into ems:

    //set function to get the size of 1em depending on browser aspect and size
function squeezemod(){
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var skinnyem = windowWidth / 95;
var fatem = windowHeight / 45;
var ratio = windowWidth / windowHeight;
if (ratio<2.1){
var emval = skinnyem;
}else{
var emval = fatem;
};
$("body").css({"font-size": emval + "px"});
};

//on resize do these functions
$(window).resize(function(){
squeezemod();
});

    You'll need to initialize the function in your HTML head too:

    <script type="text/javascript">
//squeezemod();
</script>

    Everything sized using ems will resize according to the size of the browser window. It changes according to the width to height ratio too.

    You may need to fiddle with the calculation to get it to work right for you. The Squeezemod fix was never 100%.

    or, use a safari specific border

    by using javascript, set browser specific styles to your item class:

    if ( $.browser.safari ){
$(".item").css('xxxxxx', 'xxxxxxx');
};

    xxxxxx is where you define the style e.g. margin 1px Utilize this to add the width that Safari has taken off in whichever way suits your items - margin, border, etc. You could even just redefine the width completely for Safari only using this method.