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

5
  • Do you mean for the same it sometimes works and sometimes doesn't? Or does one URL consistently break?
    – Richard
    Oct 29 '14 at 18:04
  • Any category, the home page and product page upsells that are in the .products-grid ul Oct 29 '14 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. Oct 29 '14 at 18:25
  • @MathewPorter - Have you been able to pinpoint what is causing this? Oct 29 '14 at 20:52
  • No not yet, I do have a feeling that it may have something to do with the image resizing script. Oct 30 '14 at 8:49
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.

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
    Oct 30 '14 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. Oct 30 '14 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. Jan 19 '15 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.

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. Jan 19 '15 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();
    });
}
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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