Safari 10 issues with product listings.php and equal height add on

[♥peterpil19]

Hi,

 

OSC bootstrap edge 2.4.3

 

Website link: www.ancientcointraders.com 

 

A potential customer alerted me to potentially fatal issues if viewing my website in Safari 10 plus.  This issue cannot be unique to my oscommerce installation. 

 

Both issues related to 'Grid View'. Grid view is in my view pretty essential and superior to the list view, and the standard installation results in irregular white spaces vertically in between product listings (you can refer the demo bootstrap store) which means it cannot be used on any professional website without fixing it so all product listings have equal heights.  If I am mistaken on that, please let me know because all my questions on the subject previously I was referred towards installing the equal heights model to make grid view useable. 

 

There are 2 major issues when viewing my site in Safari:

 

1. (with or without equal heights module) Grid view shows 2 products on the first page and then 3 on each subsequent page. (without equal heights, it shows 2, then 3 and then occasionally only 1 on a subsequent row due to that vertical white space issue from above). I also had the same issue with the categories from page module. What fixed it was removing the "flex" references from the template page for that contribution and now everything stays on the same line. For the purposes of illustrating the problem, I have undone those changes so you can see the same problem on the first page as I have in product listings pages.

 

As a test, removing the "flex" references from the list group in custom.css fixes it so the first row has 3 products, however I end up with an irregular number of products on every subsequent row (in both Chrome and Safari). So therefore it appears that flex box in Safari might be the cause of this issue?

 

Refer ATTACHED PHOTO 1:

How do I fix it so that 3 products are on one row in Safari or make necessary adjustments in user.css to address the flexbox issue not working in Safari?

 

2. (with equal heights module), when first visiting a page, all the product listings are squashed onto another and therefore illegible.  When revisiting the page, sometimes it appears as it should, sometimes it appears squashed and it is inconsistent. I noticed with Google Chrome as well that if you refresh the cache when on page, you will have some of the product listings going over into the footer, but this corrects itself when you revisit that same page.

 

Refer ATTACHED PHOTO 2: How do I fix it so equal heights add on works with Safari version 10 and above?

 

The Oscommerce I used 10 years ago had a perfectly working grid view. So I don't understand how 10 years later this could be a problem and am assuming as a starting assumption that it is something I have not done correctly...

 

Grateful for any suggestions on what I could do.

 

Thanks

 

Peter

[♥peterpil19]

Quick update:

 

Issue 2 solved: removed the equal heights query add on and the CSS solution with additional changes to user.css which were suggested by @Gergley in this thread:   http://www.oscommerce.com/forums/topic/408314-equal-height-possible-new-approach/. For anyone else who has had the same issue ( equal heights not working in default installation), you can make those changes suggested by Gergley to user.css

 

Therefore the only remaining issue is why the first row only has 2 products in Safari 10.  See photo above or:  http://www.ancientcointraders.com/greek-c-22.html

 

Peter

[♥bruyndoncx]

perhaps there is an error in the safari browser when calculating margins/available space.

There is padding set

 

You could try to set this in user.css to overwrite the default and see if that solves the issue

I would lower the % to 33, or just 30% to see if it will fit on one line

 

.col-sm-4 {

width: 33.3333%;

}

[♥peterpil19]

perhaps there is an error in the safari browser when calculating margins/available space.

There is padding set

 

You could try to set this in user.css to overwrite the default and see if that solves the issue

I would lower the % to 33, or just 30% to see if it will fit on one line

 

.col-sm-4 {

width: 33.3333%;

}

 

Hi,

 

Finally got access to a computer with latest version of Safari

 

The issue I am experiencing is that the last product in the first row jumps to the second row. The second and third rows has 3 products per normal and the last row  only has 1 product (due to the displacement) - only in latest version of Safari.

 

 

I have tried the suggestion above but changing  .col-sm-4  has no effect as the user.css refuses to override even with !important tag.

 

I have isolated the issue to the "item list-group-item" or maybe the "grid-group-item" class which appears in product_listing.php.

Deleting reference to "item list-group-item" results in 3 products on the first row but then products skipping in the rows beneath

 

Any tips on how to modify "item list-group-item" or "grid-group-item" to have all 3 on the same row in Safari. Clear to me that is what is causing the issue

 

Thanks,

 

Peter

[♥peterpil19]

Solved.

 

There is definitely an issue with Safari  when it comes to flexbox and bootstrap.

I am surprised no-one else has raised it here on this forum.

 

Removing the :before and :after from the flex container solves the issue.

This can be done by adding the following to user.css:

.list-group.container:before,
.list-group.container:after,
.list-group.row:before,
.list-group.row:after {
   content: normal; // IE doesn't support `initial`
}

Here is link to the solution found on stack overflow: http://stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap

 

Regards,

 

Peter

[♥peterpil19]

Just a followup,

 

Whilst above solution has fixed the problem in the latest version of Safari, the flexbox is now broken (in the same way as I originally posted) in the older versions.  This is counterintuitive - why would it work originally in older versions, then after fixing it, work in the newest version only...

 

I would be interested if anyone has any suggestions as this cannot be an issue peculiar to my store.

 

Peter

[♥peterpil19]

By way of update,

 

I have decided not to preserve with trying to get it working for an earlier version of Safari, on the basis that that 1) the default demo store for Osc 2.3.4 bootstrap edge appears to have the same issue; and 2) on the assumption that most people will be using a more recent version of Safari, or if not, they will in due course.

 

If anyone has an alternative option I would be interested in hearing it.

 

Peter