Bottom bar - Social icons doesn't display correctly with safari about hermit HOT 13 CLOSED

It works perfect now, thanks @Track3!

from hermit.

I have no access to a Mac at this moment so I can't investigate this problem deeper. Apparently there's enough space in the bottom bar but the right part still choose to shrink, which is unreasonable. Maybe setting flex-shrink to 0 can be a workaround?

.hdr-right {
  flex-shrink: 0;
}

This can be a bug of safari itself. Is there anyone has the same issue? By the way, what's the version of your safari?

from hermit.

My safari version is: Version 12.0.1 (14606.2.104.1.1)

This issue also happen in my Ipad Air 2 version 12.1.

Example site has this issue too.

I'd like to hep but I'm not familiar with css javascript so :(

Btw, thanks for a beautiful theme.

from hermit.

I you want me to test some thing, just post it here with instruction. Like change some thing in some files.

from hermit.

Try add this to the theme's assets/scss/style.scss, at the end of the file:

.hdr-right {
  flex-shrink: 0;
}

You should use the extended version of Hugo to build your site so stylesheets can be regenerated.

from hermit.

I tried but it didn't help. I use hugo v0.52 extended version.

from hermit.

Maybe let's just use an old-fashioned way. In assets/scss/style.scss, about line 197, remove two lines then add:

&::after {
  display: block;
  content: "";
  clear: both;
}

.hdr-left {
  float: left;
}

.hdr-right {
  float: right;
}

like that:

from hermit.

Will do it when I'm home.

from hermit.

Hi Track3

I love your work. This template is fantastic and I would like to use it for my blog.

Unfortunately the fix you provided did not work and the problem persists in Safari.

from hermit.

Hello Track3, this problem seems to be a compatibility problem with Safari.

I don't know how to deal with it either. So if you have any solution, please post me.

Thank you very much.

from hermit.

It seems that this is not a problem with the bottom bar's flexbox layout, it's the right part itself causes issues. My last attempt: set .hdr-icons to display: inline or completely remove the display property, because I don't know why I set it to inline-block, it doesn't make sense…

It's located in assets/scss/style.scss line 220

If this won't work, then I have no idea, I don't have safari to test it right now, which is painful. Maybe let's just wait and see if anyone can do something.

Is this issue only appears in Safari 12?

from hermit.

Just tried it, and it still the same :(

I only have Safari 12 here so Idk does it happen on other version of safari.

from hermit.

Just added a commit, removed the screen-reader-text for those social icons, seems to be working.

from hermit.