Docsify: After setting the background image, the button is obscured

[sy-records]

Bug Report

Steps to reproduce

After setting the background image, the button is obscured, Because of this PR #1215

hello, @mohammedsahl Can you fix it if you have time?

https://docsify.js.org/#/cover?id=custom-background

What is current behaviour

What is the expected behaviour

Other relevant information

• [ ] Bug does still occur when all/other plugins are disabled?

• Your OS:
• Node.js version:
• npm/yarn version:
• Browser version:
• Docsify version: v4.11.4
• Docsify plugins:

Please create a reproducible sandbox

Mention the docsify version in which this bug was not present (if any)

[mohammedsahl]

Sure thing! I'll have a look soon 😊

[jhildenbiddle]

Good catch, @sy-records.

The coverpage content is being obscured by the <div class="mask"> element. This is happening because the mask is rendered after the coverpage content, which places it above the coverpage content in the natural stacking order. This can be circumvented by manually setting z-index values (as was done previously), but this isn't necessary if elements are just rendered in the correct order to begin with.

The easiest way to fix this issue is to render the <div class="mask"> before the <div class="cover-main"> element and add the following declaration to .cover-main ruleset in _coverpage.style:

position: relative;

FWIW, there are better ways to handle masks. For now, the above fix is a minimal change that avoids breaking third-party themes and custom CSS that targets the .mask element:

/* Change mask color */
.mask {
  background: rgba(0, 0, 0, 0.7);
}

/* Disable mask */
.mask {
  display: none;
}

[trusktr]

@jhildenbiddle Would you like to make that a PR?

[jhildenbiddle]

@trusktr --

I added the following to #1212:

• [ ] Update .mask implementation (multiple backgrounds vs. separate .mask element) (see #1233)

I'll break that list into separate PRs once we get rolling on v5. For now, I'm trying to keep the issue "noise" down to a minimum while I'm preparing to triage all of the existing issues.