Differences between Chrome and Safari (and some bugs)
This support request was posted in Smart by mertxe
- mertxe March 15, 2018 at 1:45 pm
Hi! I’m starting a new eCommerce website with this theme and i’m running into some problems.
I’m on a temp installation, and the first bug i see is that in Chrome i see the “hero” text centered, but not in Safari.
Then, image gallery / slider is buggy on both browsers. On Chrome i see a grey block, and when i see an image it’s constantly resetting to the first one. On Safari it’s like 10px tall, can’t see anything.
Everything (theme, visual composer, wordpress and woocommerce) is on latest versions available on ThemeForest.
Juanfra Aldasoro March 15, 2018 at 3:40 pmHi Mertxe,
Thanks for writing, I hope you are doing well. I really love what you’re doing with the theme 🙂
With regards to the first issue, we recently modified the layout structure for version 1.1 and we’re now using flexbox. It seems that there’s an issue with Safari, would you please try adding the following custom CSS:
[class*="vc_col-"] { width: inherit; }With regards to the gallery issue, are you using any other gallery plugin that may cause a conflict with the JS of Flexslider (the one used by our gallery element)?
Thanks,
Juan.mertxe March 15, 2018 at 3:56 pmTried the CSS snippet for the header, didn’t change anything on Safari. Even created a 3 column layout and placed the content in the middle, but still shows in the left. Column
Gallery now looks good on Chrome, still breaks in Safari.
There was a conflict with this plugin,
https://es.wordpress.org/plugins/variation-swatches-for-woocommerce/ Any recommendations for substitutes? Client needs to be able to show the patterns for selections :/Juanfra Aldasoro March 17, 2018 at 2:15 pmHi Mertxe,
Sorry for the delay. Regarding the CSS snippet, have you tried adding the !important flag beside? Please be sure that you clear out the cache in safari.
With regards to the slider, have you tried to create a slideshow in slider revolution? We’ll be taking a look at these issues, though.
Best,
Juan.Juanfra Aldasoro March 19, 2018 at 8:49 pmHi Mertxe,
I hope you are doing well.
We’ve been checking your site and it seems that Safari has some different defaults for flexbox.
We’ve added this CSS to your code and it now is working as expected:
.vc_column_container { flex-grow: 1; }With regards to the flexslider issue, it seems that there’s a conflict between flexslider (the script in charge of the gallery) and lazyload. If you disable lazyload, the slider should be working fine in safari. We’re investigating this issue as we speak.
Please let us know if the code I’ve sent you for the first issue went well.
Best,
JuanJuanfra Aldasoro March 19, 2018 at 8:53 pmWith regards to flexslider. You can try adding the following custom CSS:
.flexslider .slide img { height: auto !important; }Best,
Juanmertxe April 26, 2018 at 11:03 pmJuan, I reply on this topic because I was just about to finish with this site but in my last check i see that in iPhones (i use Android Phone + Chrome on MacBook) content gets overlapped, displaced, etc.
See screenshots here: https://www.dropbox.com/sh/9w1ir2s5fr25prr/AADrciS36Ja9NJpWXkIgeYjGa?dl=0
In Android everything is just fine, but it gets messed up in iPhone.
Product pages look ok.
mertxe April 28, 2018 at 4:18 pmMaybe it has something to do with this 5 errors which don’t show up on Chrome’s Console but they do on Safari’s:
https://www.dropbox.com/s/gv6mnunhb39zaux/Screenshot%202018-04-28%2013.17.44.png?dl=0Juanfra Aldasoro April 28, 2018 at 7:05 pmHi Mertxe,
Thank you for the follow-up.
Would you please add the following custom CSS:
@media all and (max-width: 767px) { .nice_row-inner, .vc_inner, .row-inner { display: block; } .background-inner:empty { display: initial !important; } }Best,
Juan.
This topic is marked as resolved
Only the topic author can re-open this thread.