1

I have encountered an issue with Magento 1.9.1 CE whilst browser testing a clients site in Safari on iOS 8 and 8.1 on iPad and iPhones (tested on iPad Mini, iPad Air, iPhone 5, iPhone 5s)

The product grid spacing breaks at random, it should for instance display 3 products in a row portrait and 4 products on a row landscape.

However at random the products display 1 per line, 2 per line, 1 and then 2 per line, basically all in random amounts per row.

This bug is present with my bespoke theme developed using correct convensions with the default rwd theme. It is also present if the bundled rwd theme is enabled. No changes to the template files, nor the css have been made to possibly effect this.

Also to air on the side of caution, I opened Magento's demo store: http://enterprise-demo.user.magentotrial.com/ which is essentially 1.9 CE theme and it has the same issue.

I have got the iPad connected to my Mac and I am using Safari Dev tools to try and narrow this down but am yet to find the root cause.

Just wanted to know if anyone has had this issue and found a fix? And also to make others aware of what seems a bug for the rwd theme in Magento 1.9 CE and enterprise in Safari on iOS 8 builds.

Some screen shots of the issue are below.

Magento Category Page Landscape

Magento Category Page Portrait

Improve this question
5
  • Do you mean for the same it sometimes works and sometimes doesn't? Or does one URL consistently break?
    – Richard
    Commented Oct 29, 2014 at 18:04
  • Any category, the home page and product page upsells that are in the .products-grid ul
    – Mathew Porter
    Commented Oct 29, 2014 at 18:12
  • From testing with Safari dev tools, I have a feeling it may be the image resizing causing the issue, which I am having a look at now.
    – Mathew Porter
    Commented Oct 29, 2014 at 18:25
  • @MathewPorter - Have you been able to pinpoint what is causing this?
    – Erik Hansen
    Commented Oct 29, 2014 at 20:52
  • No not yet, I do have a feeling that it may have something to do with the image resizing script.
    – Mathew Porter
    Commented Oct 30, 2014 at 8:49

4 Answers 4

Reset to default
2

So, someone was talking about ultimo theme in another question, and this was in their changelog:

Fixed: in new version of Safari on iOS8, product grid in category view was sometimes displayed incorrectly (each row should have the same number of products, but sometimes products dropped to another row). It was caused by this bug in Safari.

So, I had a look, and the section

GENERIC CHILD RANGES

nth-child(n+4):nth-child(-n+8)

definitely displays differently (correctly?) in chrome 40, to how it appears on Yosemite Safari 8.0 and Safari on iOS 8.1 on my phone.

It looks like rwd/default/scss/module/_product-list.scss is using :nth-child in a few places, so let's guess that's the problem.

Improve this answer
3
  • What seems resolved? That's my mac's safari version, and it's display nthmaster.com nth-child(n+4):nth-child(-n+8) wrong, lighting up everything after 8 is wrong. Also, I checked, and 600.1.25 was tagged on the 17th Sep, the patch was merged on the 29th
    – Richard
    Commented Oct 30, 2014 at 12:05
  • Your correct, same happens for me when looking at nthmaster on my Mac (earlier was just testing Magento which wasn't effected) so obviously the commit hasn't found its way in to an update yet.
    – Mathew Porter
    Commented Oct 30, 2014 at 12:12
  • Take a look at @ezekielf's answer, the bug in safari shows up when you nest nth-child selector but the rwd theme doesn't do this so I don't think they are related.
    – Javier Villanueva
    Commented Jan 19, 2015 at 19:42
1

I also came across this bug and narrowed it down to the alignProductGridActions() function in skin/frontend/rwd/default/js/app.js. The purpose of this function is to vertically align the action buttons/links in the product grid since that is hard to do in css. We decided to remove the function and live without vertical alignment in order to fix the iOS 8 issue.

Improve this answer
1
  • This should be accepted as the correct answer, you can tell the issue is related to JS not CSS because when you disable prototype (which app.js depends on) the lists are displayed correctly every time.
    – Javier Villanueva
    Commented Jan 19, 2015 at 19:26
0

While we don't get an official fix for this, instead of commenting the lines out, we can only skip them when user is on iOS. On skin/frontend/rwd/default/js/app.js, add the if shown below:

// Add the if below to skip alignment when on iOS
if (!Modernizr.ios) {
    alignProductGridActions();


    // Since the height of each cell and the number of columns per page may change when the page is resized, we are
    // going to run the alignment function each time the page is resized.
    $j(window).on('delayed-resize', function (e, resizeEvent) {
        alignProductGridActions();
    });
}
Improve this answer
0

The real solution is to replace all nth-child by nth-of-type in the _product-list.scss. The js doesn't need to be modified

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.