Different view on Safari

  • Posts: 117
  • Thank you received: 1
  • Hikashop Business
2 weeks 5 days ago #312496

-- url of the page with the problem -- : www.vignaiolitreviso.com
-- HikaShop version -- : 4.2.2

Hi,
why my catalog list and product view are different from Chrome and Safari?

Look the attach




Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 67389
  • Thank you received: 9992
  • MODERATOR
2 weeks 4 days ago #312501

Hi,

Indeed there is a problem with Safari not supporting properly the flexbox system. Using Flex was a big improvement of the 4.2.2 to make the grid system more resilient to template conflicts and layout issues.
We're currently investigating this issue. A bit of CSS should be able to fix the problem.
In your case, for the listing, adding such CSS should help:

@media (min-width:992px) {
	.hkc-md-4 { width:33% !important; }
}

Please Log in or Create an account to join the conversation.

  • Posts: 100
  • Thank you received: 7
  • Hikashop Business
2 weeks 4 days ago #312526

I am having the same issue with my site. Also, I notice the same not just in the front-end category listing but also in the backend on the orders page. Everything is now in one long column in safari rather than in 2 parallel columns like it still shows in firefox and chrome. Looking forward to a global fix for it (or, I guess, to putting some CSS for each of the affected pages?). Thanks for working on it!

Please Log in or Create an account to join the conversation.

  • Posts: 117
  • Thank you received: 1
  • Hikashop Business
2 weeks 2 days ago #312551

Hi,
thanks so much.
Is it possible to create an override about /media/com_hikashop/css/hikashop.css?

Thanks
Matteo

Please Log in or Create an account to join the conversation.

  • Posts: 2287
  • Thank you received: 298
  • MODERATOR
2 weeks 2 days ago #312557

Hello,

As Nicolas said the Team HikaShop works on this subject to provide as soon as possible a general solution for all this display issue.
Sorry for the inconvenience, we can tell you that we were very surprised by the difference to manage flex system in Safari navigators... That was really unexpected on our side.

Note that if you make returns about this issue can help us to work more quick and don't forget any elements.
For your present issue, most often the correction is like this example :

If you have a listing with 4 columns, the classic css command was :

@media (min-width: 992px)
.hkc-md-3 {
    width: 25%;
}
You have to add this custom command :
@media (min-width: 992px)
.hkc-md-3 {
    width: 24.95%;
}
See here how to proceed to add this temporary css fix.
As you can see, it's not a big change, just little adjustments.
But of course as soon as possible we will add fix to this issue.

Important : Don't edit hikashop.css, while we work on this subject it's better to add some custom css in style.css.
So far, on our side we process like this :

width: 33.3333%; => width: 33% !important;
width: 25%; => width: 24.95% !important;
width: 16.66667%; => width: 16% !important;
And so on...

Regards

Last edit: 2 weeks 2 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 15
  • Thank you received: 0
  • Hikashop Business
2 weeks 2 days ago #312568

Listing 4 columns solved, the correct css:

@media (min-width: 992px) {
.hkc-md-3 {
    width: 24.95%;
    }}

But in the full product view I have the same problem: only 1 column not 2

Last edit: 2 weeks 2 days ago by Gonzalez Villoria.

Please Log in or Create an account to join the conversation.

  • Posts: 1103
  • Thank you received: 108
2 weeks 2 days ago #312569

Hi,

@Hikashop

I really hope that Hikashop will consider to migrate to Bootstrap 4 with Joomla 4 release. Then you wouldn't need to have things like "Height consistency" in order for the grid to work properly.... Every styling could be left to Joomla/Bootstrap 4... If someone wants to override, well he could use frontend.css or leave template to do the job. The best part that you could save time while developing something, you could just use bootstrap css classes in back-end, front-end instead of creating your own :)

Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 2287
  • Thank you received: 298
  • MODERATOR
2 weeks 1 day ago #312605

Hello,

Kyratn, the fact that recent release of HikaShop use the flex system leads us to use exactly have the same bootstrap 4 frame, the difference is that we have all elements in control.
But it's exactly the same process than bootstrap 4.
Plus, for this topic this current issue won't be solve by bootstrap 4, unfortunately, here the point is to adjust our css in order treat effect of a
Safari bug with the flex system.

Regards

Last edit: 2 weeks 1 day ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 2287
  • Thank you received: 298
  • MODERATOR
1 week 2 days ago #312783

Hello everybody,

We have have just add in our HikaShop package some correction in order to manage the flex system in Safari.
Your returns will be appreciated if in some case something seems wrong to you.

Thanks for your patience.
Regards

Please Log in or Create an account to join the conversation.

  • Posts: 100
  • Thank you received: 7
  • Hikashop Business
1 week 2 days ago #312784

Thanks for this, Philippe - It *almost* fixed the issues I'm having on my site.

Previously, I noticed the grid issue for Safari in 3 ways:

- on a category page with just 2 columns
- on a product page with 3 columns
- in the backend on the product pages

Your fix addressed the issue for the product page with 3 columns and the backend for the product pages.

I am still getting a display issue with the category page with 2 columns. Presently, they show only as one column.

Here is the link to the page that doesn't work correctly:

www.stutteringtherapyresources.com/store

Here is the link to the page that you fixed (it used to show only 2 products on the first line then 3 for the subsequent lines - now, it works great).

www.stutteringtherapyresources.com/store/books-store

Any suggestions for fixing that category page?

Otherwise, all is well. Thanks for being so responsive!
- cott

Please Log in or Create an account to join the conversation.

  • Posts: 100
  • Thank you received: 7
  • Hikashop Business
1 week 2 days ago #312795

ALSO - when I uploaded the new version, I also got a new error that I have not received before.

I posted a fresh ticket about it since it's not related to the view on Safari.

I get a "0 Call to a member function getCart() on null" when changing the shipping or billing address in the back end.

I also just discovered that it gives the same error on the front end when someone goes to change their shipping or billing address.

For this reason, I dropped back down to the old build... that one doesn't have the address problems; just the grid issue (which is minor by comparison.)

Thanks in advance for your help.

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 2287
  • Thank you received: 298
  • MODERATOR
1 week 1 day ago #312807

Hello,

Thanks for your return about this new issue, about the Safari issue :
Can you process a test with this correction :
1. Go to your safari_hikashop.css file in your YourWebsite\media\com_hikashop\css\ folder
2. In this css file, replace all width: 49.95%; for width: 49.94%;

When I process some tests on directly on your website (via inspector tool) it seems to work, but we are awaiting your returns to add it to our files.
Regards

Please Log in or Create an account to join the conversation.

  • Posts: 100
  • Thank you received: 7
  • Hikashop Business
1 week 1 day ago #312824

Sure thing. Will do. I've dropped down to the older version due to the other error with changing the shipping or billing address... once I have time to do the error tracking on that, I'll also try this for the 2-column category view. More soon(ish).

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 100
  • Thank you received: 7
  • Hikashop Business
2 days 4 hours ago #312993

Thanks Philip for your clear instructions.
I noticed that you had made another change that fixed a GetCart error for another user, so I decided to try the newest version to see if it fixed my GetCart issue, as well. And, indeed it did! SO, I was able to try the recommendation above with the 49.94%.

AND, indeed, it worked -- I had to clear my cache first to see the change, though.

SO, yes, success. Thank you for your help!
Scott

Last edit: 1 day 22 hours ago by jsyaruss.
The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 2292
  • Thank you received: 53
  • Hikashop Business
1 day 16 hours ago #313007

Safari works perfectly with flexbox and grid caniuse.com/#feat=flexbox

i am using flex since at least 5 years and grid since 2 years

Last edit: 1 day 16 hours ago by erickb.

Please Log in or Create an account to join the conversation.

Time to create page: 0.130 seconds
Powered by Kunena Forum