fix: the coverpage image display error

[sy-records]

Summary

fix #381 (comment)

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Repo settings
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Screenshots

click

Chrome before	Chrome after

Safari before	Safari after

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/2T9dXDvB9KVK1CsYLPCoVSuJeR4L
✅ Preview: https://docsify-preview-git-fork-sy-records-fix-381-docsify-core.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6997df8:

Sandbox	Source
docsify-template	Configuration

[jhildenbiddle]

@sy-records How have we verified this fix? All of the screenshots appear to be on Chrome for Android.

[sy-records]

I used ios safari also recurred, so the fix was made.

[trusktr]

If we do this, due to how vw works, we need to verify that the page does not start scrolling sideways, because 100vw does not account for scrollbar width. See this:

https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one/23367686

Can you add screenshots in this PR?

[sy-records]

I added screenshots.

[jhildenbiddle]

@sy-records

There are a few issues with the existing CSS and the changes in this PR.

1. The section.cover element should be given a min-height value (not a fixed height value) because its height can exceed the viewport height.
2. The section.cover element's width does not need to be set in vw units. Best to leave this set to 100%.
3. The .mask element needs to cover the entire section.cover element, so it also should not receive a fixed height. However, because this element uses position: absolute and contains no content of its own, we cannot use min-height here. Instead, it's best to remove the height value, set bottom: 0, and make sure section.cover is using position: relative.
4. BONUS: When the section.cover element comes close to or does exceed the viewport height, its content is often pushed against the top and bottom edges of the coverpage. By setting the top/bottom margin of the first/last elements in the coverpage, we can prevent this.

I can't edit your PR nor can I comment on unmodified lines here on GitHub so I've copy/pasted the updated CSS (Stylus) below. I'm also happy to create a separate PR to address the issue if preferred.

section.cover
  position relative
  align-items center
  background-position center center
  background-repeat no-repeat
  background-size cover
  min-height 100vh
  width 100%
  display none

  &.show
    display flex

  &.has-mask .mask
    background-color $color-bg
    opacity 0.8
    position absolute
    top 0
    bottom 0
    width 100%

  .cover-main
    flex 1
    margin -20px 16px 0
    text-align center
    position: relative

    &:first-child
      margin-top 1em

    &:last-child
      margin-top 1em

  a
    color inherit
    text-decoration none

    &:hover
      text-decoration none

  p
    line-height 1.5rem
    margin 1em 0

  h1
    color inherit
    font-size 2.5rem
    font-weight 300
    margin 0.625rem 0 2.5rem
    position relative
    text-align center

    a
      display block

    small
      bottom -0.4375rem
      font-size 1rem
      position absolute

  blockquote
    font-size 1.5rem
    text-align center

  ul
    line-height 1.8
    list-style-type none
    margin 1em auto
    max-width 500px
    padding 0

  .cover-main > p:last-child a
    border-color var(--theme-color, $color-primary)
    border-radius 2rem
    border-style solid
    border-width 1px
    box-sizing border-box
    color var(--theme-color, $color-primary)
    display inline-block
    font-size 1.05rem
    letter-spacing 0.1rem
    margin 0.5rem 1rem
    padding 0.75em 2rem
    text-decoration none
    transition all 0.15s ease

    &:last-child
      background-color var(--theme-color, $color-primary)
      color #fff

      &:hover
        color inherit
        opacity 0.8

    &:hover
      color inherit

  blockquote > p > a
    border-bottom 2px solid var(--theme-color, $color-primary)
    transition color 0.3s

    &:hover
      color var(--theme-color, $color-primary)

[jhildenbiddle]

See #1514 (comment)

[sy-records]

@jhildenbiddle You can submit a PR.