Different view on Safari

  • Posts: 121
  • Thank you received: 1
7 months 1 week 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: 69547
  • Thank you received: 10412
  • MODERATOR
7 months 1 week 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: 103
  • Thank you received: 7
  • Hikashop Business
7 months 1 week 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: 121
  • Thank you received: 1
7 months 1 week 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: 2498
  • Thank you received: 334
  • MODERATOR
7 months 1 week 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: 7 months 1 week ago by Philip.

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

  • Posts: 24
  • Thank you received: 0
  • Hikashop Business Hikashop Multisite
7 months 1 week 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: 7 months 1 week ago by Gonzalez Villoria.

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

  • Posts: 1119
  • Thank you received: 114
7 months 1 week 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: 2498
  • Thank you received: 334
  • MODERATOR
7 months 6 days 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: 7 months 6 days ago by Philip.

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

  • Posts: 2498
  • Thank you received: 334
  • MODERATOR
7 months 7 hours 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: 103
  • Thank you received: 7
  • Hikashop Business
7 months 7 hours 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: 103
  • Thank you received: 7
  • Hikashop Business
7 months 1 hour 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: 2498
  • Thank you received: 334
  • MODERATOR
6 months 4 weeks 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: 103
  • Thank you received: 7
  • Hikashop Business
6 months 4 weeks 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: 103
  • Thank you received: 7
  • Hikashop Business
6 months 3 weeks 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: 6 months 3 weeks ago by jsyaruss.
The following user(s) said Thank You: Philip

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

  • Posts: 2375
  • Thank you received: 55
  • Hikashop Business
6 months 3 weeks 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: 6 months 3 weeks ago by erickb.

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

  • Posts: 103
  • Thank you received: 7
  • Hikashop Business
6 months 2 weeks ago #313120

hi again -
Thanks for your help in fixing the flex issues with Safari. I have the main category and product displays fixed now, thanks to your input. There is one more place on my website where I'm experiencing a grid issue that I hope you can help with.

I have a module called "related products" that appears under "your cart" on my site... Just as the other grid errors were showing one less product/category on the first line then returning to the correct number on subsequent lines, I am having the same problem again on this related products listing. I have attached a screenshot.

It appears to be associated with hkc-md-6 in the safari-specific CSS file, but I don't know what value to change it to. Looking forward to your guidance. Thanks!
Scott

Attachments:

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

  • Posts: 2498
  • Thank you received: 334
  • MODERATOR
6 months 2 weeks ago #313128

Hello,

Like previous adjustment, you have to modify for all ".hkc-md-6" with width value as "49.94%;", for this :
1. open your safari_hikashop.css (in YourWebsite\media\com_hikashop\css folder)
2. try to decrease slowly the value to have "49.93%;" or "49.92%;" or maybe more.

I insit on the fact that you have to modify only all ".hkc-md-6" with width value as "49.94%;"

And process some tests to have the correct value, and don't forget to returns to us, and then we will modify our file for next release.
Awaiting news from you, thanks in advance.

Regards

Last edit: 6 months 2 weeks ago by Philip.

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

  • Posts: 103
  • Thank you received: 7
  • Hikashop Business
6 months 2 weeks ago #313169

I'm sorry, Phillippe, but this doesn't seem quite right.

Indeed, there are several entries for .hkc-md-6 in the CSS file... but they do not all have values near 49.94%. They change dramatically based on the min-width parameter. For example, for min-width 992px, the value of .hkc-md-6 is 85.64%. I don't really think I should be changing that to 49.94 (or 93 or anything else).

Previously, I did change all examples of 49.95 to 49.94 and that fixed one of the grid issues. But, I don't think that I should change all .hkc-md-6 because that will have other consequences.

I tried a whole bunch of different values for md-6 in the CSS file with no luck. But, in case it's helpful, I played around with the inspector for the website and discovered that if I change the class for the related products to hkc-md-5, then it works fine. (Note that my related products are to the right of my product listing, not under it, so the width is different than you might expect.)

Do you have any other guidance for me?

In case it helps, you can duplicate the problem using Safari on this link:

www.stutteringtherapyresources.com/store...py-a-practical-guide

Thanks,
Scott

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

  • Posts: 2498
  • Thank you received: 334
  • MODERATOR
6 months 2 weeks ago #313210

Hello,

I'm sorry but I think you haven't understand, in my previous message I mean that you have to find in your safari_hikashop.css, every css command like this example :
You have this :

.hkc-md-6 { width:49.94%; }
or
.hkc-6 { width:49.94%; }
or
.hkc-xs-6 { width:49.94%; }

=> Try to modify the value 49.94% for a more little value, here I process some tests on your website, and the required value seems to be 49.8%;

Then, every value before in 49.94% have to be replaced by 49.8%.
And absolutly not all the hkc-xx-6 value, especially if you have from the start a value like 59.95%, on this point you right, only where value was 49.94%.

Example :
Around line 27 :
@media (min-width:576px) {
...
.hkc-xs-6 { width:49.8%; }
...
}
or
Around line 53 :
@media (min-width:992px) {
...
.hkc-md-6 { width:49.8%; }
...
}

On our side, as we was able to process directly some tests, we have modify our safari_hikashop.css.
Can you process some tests with this new HikaShop build and as usual make your return.

Awaiting news from you.
Regards

Last edit: 6 months 2 weeks ago by Philip.

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

  • Posts: 103
  • Thank you received: 7
  • Hikashop Business
6 months 2 weeks ago #313219

Oh, fantastic. That did it! Thank you again and again for your help.
Scott

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

Time to create page: 0.150 seconds
Powered by Kunena Forum