Storefront right margin issue in Safari on Mac and iOS

  • Having the weirdest issue… …the Storefront theme (and the child I created which has absolutely ZERO styling to it thus far) have this weird anomaly when viewing in a shrunken screen in Safari on a Mac or on an iOS device.

    The entire page, every page, has an odd margin. Depending on the width of the screen, the width of this ghost margin varies, so I assume it’s percentage based.

    I can not replicate the problem in Chrome or Firefox, so it’s definitely just a Safari issue both in OS X and iOS. (Would love to show everyone the site but it’s password protected as per the client’s instructions and it HAS to stay that way until we’re out of production.

    I have posted some screen caps to Dropbox to highlight the differences between Safari and Chrome:

    Screen Cap 1 (Safari)

    Screen Cap 2

    Screen Cap 3

    I’ll re-iterate that this issue, it’s the same in both the Storefront theme and the child and I’ve not even done anything to the child beyond set it up and enqueue the parent theme’s stylesheet.

    I have no idea what could be causing this.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hey,

    That’s very strange. I assume you’re using the latest version of Storefront?

    I can’t actually replicate the issue which makes it tricky to address. Do you see the same issue on our demo? https://demo2.woothemes.com/storefront/

    Could you share a url?

    Thread Starter tonydjukic

    (@tonydjukic)

    @jameskoster

    I figured I wouldn’t see the issue on your demo and when I checked, it’s not there. It really does boggle the mind and I’ll wager that if I start throwing Storefront up on a some production sites to try and replicate the problem, it won’t appear. That’s what makes it so confusing. The issue really shouldn’t be there and I can’t think of anything that would have made it appear.

    The client wants the site password protected, but I’ll temporarily remove the authentication requirements so you can take a look at it;

    https://mistore.hqic.ca:10043/mistore/

    I’ll have to put the authentication back before the weekend is over though, so hopefully someone can take a look before then.

    Thread Starter tonydjukic

    (@tonydjukic)

    @jameskoster

    Just found something, there is another thread in this forum where both you and I have contributed and I AM seeing the same issue on that user’s site:

    https://www.tlmmachinerie.com/estore/

    His site, like mine, is a bog standard, Storefront installation, he doesn’t appear to have done any customization to the theme whatsoever. Yet, in Safari, if you use a resizer script or re-size the window yourself, you get the same odd margin on the right, which shouldn’t be there, but is. Take a look and let me know if you can replicate.

    I can attach screenshots if you like.

    OK, I’m able to replicate this locally, but I have no idea what’s causing it.

    I’ll look into it next week and include a fix in 1.5.0.

    Issue created: https://github.com/woothemes/storefront/issues/195

    Cheers

    OK, after a quick debug I noticed the issue seems to be tied to the margin applied to .col-full. Removing the margins in the inspector removes the scroll bar. Oddly though, enabling them again (in the inspector) doesn’t add the scrollbar back. Beginning to wonder if this is a Safari issue…

    Thread Starter tonydjukic

    (@tonydjukic)

    @jameskoster I’m fairly certain it is a Safari issue. I tested Storefront repeatedly (out of excitement and general interest) when it was first released and really liked how it behaved in a responsive view – so I was surprised by the bug and really frustrated until I noticed I couldn’t replicate it in Firefox or Chrome. That’s when I figured it was strictly a Safari (OS X and iOS) bug. And, like I said, I’ve never seen it before, so it’s quite possible that the bug is only present in the newest release of Safari, which is what I’m using.

    Hopefully we’ll see an update soon and whatever fix it is you guys apply is one that resolves the issue.

    I’m pretty sure this is an issue with how Storefront styles search boxes in combination with Safaris handling of them.

    There will be a fix in the next release ??

    Fixed for next release ??

    https://github.com/woothemes/storefront/issues/195

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Storefront right margin issue in Safari on Mac and iOS’ is closed to new replies.