search

CaiJimmy / hugo-theme-stack

Card-style Hugo theme designed for bloggers
https://stack.jimmycai.com
GNU General Public License v3.0
4.83k stars 1.55k forks source link

UI BUG in Safari #249

Closed FrostMiKu closed 3 years ago

FrostMiKu commented 3 years ago

Describe the bug

display error in Safari

Expected behavior

as same as chrome

To Reproduce

build exampleSite then open the site in Safari

Screenshots

Safari: image

chrome: image

Environment

Additional context

Add any other context about the problem here.

If it's a UI issue, fill the following information:

Content of config.yaml

baseurl: https://example.com
languageCode: en-us
theme: hugo-theme-stack
paginate: 5
title: Example Site

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl
DefaultContentLanguage: en

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon:

    footer:
        since: 2020
        customText:

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji: 🍥
        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        avatar:
            local: true
            src: img/avatar.png

    article:
        math: false
        toc: true
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: disqus

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:

        # Waline client configuration see: https://waline.js.org/en/reference/client.html
        waline:
            serverURL:
            lang:
            visitor:
            avatar:
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - name
                - email
                - url
            placeholder:
            locale:
                admin: Admin

    widgets:
        enabled:
            - search
            - archives
            - tag-cloud

        archives:
            limit: 5

        tagCloud:
            limit: 10

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          pre: home

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false

Link to the demo site and/or source repository

emmmm.... exampleSite

CaiJimmy commented 3 years ago

Might need a little help since I don't have a Mac to reproduce this.

FrostMiKu commented 3 years ago

It looks like the column-gap attribute is not taking effect, I'm still working on it...

CaiJimmy commented 3 years ago

https://caniuse.com/mdn-css_properties_column-gap_flex_context

Seems to be related with column-gap property in Flex Layout. It's supported since Safari 14.1.

FrostMiKu commented 3 years ago

You are right, the UI was correct when I updated the Safari to 14.1

ps: The latest version of Safari is 14.1.1, this feature is too new (