After setting the background image, the button is obscured #1233

Activity

1. sy-records

   changed the title [-]Set the background image to be obscured[/-] [+]The background image is obscured.[/+] on Jun 20, 2020
2. sy-records

   changed the title [-]The background image is obscured.[/-] [+]After setting the background image, the button is obscured[/+] on Jun 20, 2020
3. mohammedsahl commented on Jun 20, 2020

   

   mohammedsahl

   on Jun 20, 2020

   Contributor

   More actions

   Sure thing! I'll have a look soon 😊

   👍React with 👍3Reacted by Anix, Luffy and Koy Zhuang
4. anikethsaha

   added

   bugconfirmed as a bugconfirmed as a bug

   regression

   on Jun 20, 2020
5. jhildenbiddle commented on Jun 20, 2020

   

   jhildenbiddle

   on Jun 20, 2020

   Member

   More actions

   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;
   }

   👍React with 👍3Reacted by Luffy, Koy Zhuang and Laura Kishimoto
6. trusktr commented on Jun 21, 2020

   

   trusktr

   on Jun 21, 2020

   Member

   More actions

   @jhildenbiddle Would you like to make that a PR?
7. jhildenbiddle commented on Jun 21, 2020

   

   jhildenbiddle

   on Jun 21, 2020

   Member

   More actions

   @trusktr --

   I added the following to #1212:

   • Update .mask implementation (multiple backgrounds vs. separate .mask element) (see After setting the background image, the button is obscured #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.
8. sy-records

   closed this as completedin #1234on Jun 26, 2020
9. awmleer

   added a commit that references this issue on Aug 6, 2020

   fix: lock docsify version due to docsifyjs/docsify#1233

   58677f9