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.