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.coverpositionrelativealign-itemscenterbackground-positioncentercenterbackground-repeatno-repeatbackground-sizecovermin-height100vhwidth100%displaynone&.showdisplayflex&.has-mask.maskbackground-color$color-bgopacity0.8positionabsolutetop0bottom0width100%.cover-mainflex1margin-20px16px0text-aligncenterposition: relative&:first-childmargin-top1em&:last-childmargin-top1emacolorinherittext-decorationnone&:hovertext-decorationnonepline-height1.5remmargin1em0h1colorinheritfont-size2.5remfont-weight300margin0.625rem02.5rempositionrelativetext-aligncenteradisplayblocksmallbottom-0.4375remfont-size1rempositionabsoluteblockquotefont-size1.5remtext-aligncenterulline-height1.8list-style-typenonemargin1emautomax-width500pxpadding0.cover-main>p:last-childaborder-colorvar(--theme-color, $color-primary)
border-radius2remborder-stylesolidborder-width1pxbox-sizingborder-boxcolorvar(--theme-color, $color-primary)
displayinline-blockfont-size1.05remletter-spacing0.1remmargin0.5rem1rempadding0.75em2remtext-decorationnonetransitionall0.15sease&:last-childbackground-colorvar(--theme-color, $color-primary)
color#fff&:hovercolorinheritopacity0.8&:hovercolorinheritblockquote>p>aborder-bottom2pxsolidvar(--theme-color, $color-primary)
transitioncolor0.3s&:hovercolorvar(--theme-color, $color-primary)

[jhildenbiddle]

See #1514 (comment)

[sy-records]

@jhildenbiddle You can submit a PR.