Issue with tile size or alignment in Safari

Question

Issue with tile size or alignment in Safari

Recently, while creating my portfolio on CodePen, everything was running smoothly except for one little hiccup - 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've tried adjusting the CSS calc functions, box sizing, float, and more. Here's how it appears on Chrome and Firefox.

https://i.stack.imgur.com/8EHz6.jpg

But here is how it looks on Safari:

https://i.stack.imgur.com/crLgX.jpg

Any suggestions or ideas?

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

EDIT

The issue seems to be Safari rounding down all percentages to whole pixels. How can I address this specifically for Safari?

jquery html css safari masonry

Answer 1

Answer №1

These are two potential solutions to help resolve your issue:

Consider using ems instead of percentages

To tackle this problem, you can implement a technique similar to Squeezemod which utilizes Javascript to calculate the width and height of the browser window and then converts it into ems:

// A function to determine 1em size based on browser dimensions
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"});
};

// Call the function on window resize
$(window).resize(function(){
squeezemod();
});

Make sure to add the function call in the head section of your HTML document:

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

When using ems for sizing, elements will adjust dynamically based on the browser window's dimensions, including the aspect ratio.

Adjust the calculation as needed to suit your requirements as the Squeezemod method may not provide a perfect solution.

Alternatively, apply a specific border for Safari

Using Javascript, you can apply browser-specific styles to elements with a particular class:

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

In the code snippet above, replace 'xxxxxx' with the desired style property like margin: 1px. Utilize this approach to compensate for any width adjustments made by Safari through margins, borders, or other styling options exclusively for this browser.

Answer 2

These are two potential solutions to help resolve your issue:

Consider using ems instead of percentages

To tackle this problem, you can implement a technique similar to Squeezemod which utilizes Javascript to calculate the width and height of the browser window and then converts it into ems:

// A function to determine 1em size based on browser dimensions
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"});
};

// Call the function on window resize
$(window).resize(function(){
squeezemod();
});

Make sure to add the function call in the head section of your HTML document:

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

When using ems for sizing, elements will adjust dynamically based on the browser window's dimensions, including the aspect ratio.

Adjust the calculation as needed to suit your requirements as the Squeezemod method may not provide a perfect solution.

Alternatively, apply a specific border for Safari

Using Javascript, you can apply browser-specific styles to elements with a particular class:

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

In the code snippet above, replace 'xxxxxx' with the desired style property like margin: 1px. Utilize this approach to compensate for any width adjustments made by Safari through margins, borders, or other styling options exclusively for this browser.

Answer 3

Answer №2

The grid layout is encountering issues due to the inclusion of calc() functions and percentages.

To address this problem, I have implemented a solution using jQuery where I detect the browser type and adjust each item's width by subtracting 4 pixels.

Visit this link for more details.

 // Identify Safari Browser and make adjustments for better compatibility
  if (navigator.userAgent.indexOf('Safari') != -1 && !navigator.userAgent.match(/(Chrome|iPad|iPhone|iPod Touch)/) ) { 

    alert('You are using Safari desktop.')

    var item = $('.item');
    var page = $('#page');

      item.width(function(){
        return $(this).width() - 4;
      });

      page.width(function() {
        return $(this).width() + 8;
      });

      $(window).resize(function() {


        item.css('width', '');
        page.css('width', '');

        item.width(function(){
          return $(this).width() - 4;
        });

        page.width(function() {
          return $(this).width() + 8;
        });


      });
  }

Answer 4

The grid layout is encountering issues due to the inclusion of calc() functions and percentages.

To address this problem, I have implemented a solution using jQuery where I detect the browser type and adjust each item's width by subtracting 4 pixels.

Visit this link for more details.

 // Identify Safari Browser and make adjustments for better compatibility
  if (navigator.userAgent.indexOf('Safari') != -1 && !navigator.userAgent.match(/(Chrome|iPad|iPhone|iPod Touch)/) ) { 

    alert('You are using Safari desktop.')

    var item = $('.item');
    var page = $('#page');

      item.width(function(){
        return $(this).width() - 4;
      });

      page.width(function() {
        return $(this).width() + 8;
      });

      $(window).resize(function() {


        item.css('width', '');
        page.css('width', '');

        item.width(function(){
          return $(this).width() - 4;
        });

        page.width(function() {
          return $(this).width() + 8;
        });


      });
  }

Issue with tile size or alignment in Safari

Answer №1

Consider using ems instead of percentages

Alternatively, apply a specific border for Safari

Answer №2

Similar questions

Utilizing ajax to store information in the database

When Django comments go wrong: Issues with Ajax and CSRF verification

Javascript is handling the JSON Request flawlessly, however, when using Nodejs, an error is encountered with a status

The jQuery text search/filter feature is effective in most cases, but some fields may not be searchable

Open the overflow div within a table data cell

Eliminate the lower boundary of a divisional table

Unexpected issue with codebehind not being invoked by ajax

Adjust the size of an input field in jquery or javascript based on user input

Include an additional phase within the MUI stepper and customize the styling

BEM Methodology: Ensuring the CSS value in one block takes precedence over property definitions in another block

Encountering the "G is undefined" error in Jquery when utilizing string.match

Access an HTML file in Text Edit on a Mac directly from a web browser

Can one customize the background color of a segment in a radar chart using Chart.js?

Retrieving data from an HTML input tag and storing it in a variable

"Exploring the possibilities of Ajax in conjunction with Sol

ng-click is not triggering my function

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Tips for increasing the size of the SVG icon within Material UI iconButtons

jquery accordion not functioning properly following partial ajax page refresh

get selection choice from the server