White gradient at the end of the preview's text [having the "Page previews" wikipedia beta feature enabled]

[darkred]

It's about the 'Page previews' beta feature of wikipedia (login to your wikipedia account|Preferences|'Beta features and enable 'Page previews').

When hovering on a link, there's a white gradient at the end of the preview's text.
Example link: https://en.wikipedia.org/wiki/Jeff_Loomis
Screenshot:

PS. Yes, it's a beta feature, but I believe it's super useful to have it enabled,

[Mottie]

Hi @darkred!

I'm not seeing the gradient background... I think it was fixed in 1.0.25, please make sure you have that (latest) version installed.

[darkred]

@Mottie, yes, that's the version I have.

Hope it helps (sorry I forgot to include this info to my first post):
I use Firefox 55.0.3 and Stylish 2.0.7,
have all the wikipedia beta features enabled,
and there's no other style (or script) active.

[Mottie]

I tried both Stylish 2.0.7 and Stylus 1.1.3.1 with v1.0.25 Wikipedia-Dark style. The preview is narrower, but there's no gradient.

Can you share the HTML?

[darkred]

Yes, here is the saved page:
test page.zip

[Mottie]

Sorry that doesn't help, the preview is loaded dynamically on hover. Right click inside the preview and copy/paste the HTML into a code block here please... and if you can find the offending css style and share it, that'd be an even better.

[darkred]

Also, the issue also occurs in Chrome 60 with Stylish 1.8.2.

[Mottie]

All placehoders (like /*[[base-color]]*/) are replaced in the installed style by user preferences:

I'm going to go ahead and find and disable all bright box-shadow definitions that I find in their style and let's see if that fixes this issue.

[darkred]

Unfortunately your last commit didn't fix the issue.

Here is the HTML you asked (it's the ::after node as seen in the screenshot )
(I managed to get it by navigating via keyboard while hovering link with mouse, so I edited my previous comment)

<div class="mwe-popups mwe-popups-fade-in-up flipped_x mwe-popups-image-tri mwe-popups-is-not-tall" role="tooltip" aria-hidden="" style="top: 210px; left: 827px; display: block;">
  <div class="mwe-popups-container">
    <a href="https://en.wikipedia.org/wiki/Nevermore" class="mwe-popups-discreet"><svg xmlns="http://www.w3.org/2000/svg" width="303" height="200"><image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Nevermore_Summerbreeze2007_04.jpg/300px-Nevermore_Summerbreeze2007_04.jpg" x="0" y="-12.5" width="300" height="225" clip-path="url(#mwe-popups-mask-flip)"></image></svg></a>
    <a dir="ltr" class="mwe-popups-extract" href="https://en.wikipedia.org/wiki/Nevermore" lang="en"><b>Nevermore</b> is an American progressive metal band from Seattle, Washington, United States. Formed in 1991, they are known to incorporate elements from various styles such as power metal, modern hard rock, classic heavy metal and technical thrash metal. The band has been on hiatus since 2011, due to personal issues between the band members. In April 2015, lead singer Warrel Dane confirmed that Nevermore has not disbanded, and there is a possibility for them to continue in the next two years with another album.

</a>
    <footer>
      <a class="mwe-popups-settings-icon mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-settings" href="/wiki/Special:Preferences#mw-prefsection-betafeatures"></a>
    </footer>
  </div>
</div>

In this ::after node, the following css style rule is applied (got it in Style Editor|'inline style sheet # 4', beautified)

.mwe-popups .mwe-popups-extract[dir='ltr']:after {
    right: 0;
    background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%);
    background-image: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%);
    background-image: -o-linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%)
}

i.e. as you may see from the screenshot, in that rule, the property that's active is the 4th one:
if you disable it, and then disable the 2nd one (which then becomes active) the issue is fixed.

[Mottie]

Ok, try that update.

[darkred]

That's it - thanks a lot!

[darkred]

@Mottie, on second thought, I think that this is more preferable:
background-image: linear-gradient(to right, rgb(34, 34, 34, 0), rgb(34, 34, 34, 1) 50% ) !important;
because it retains the "ellipsis" meaning of the gradient, instead of removing it completely.
Comparison:

I hope you agree.

[Mottie]

Done... updated on userstyles.org. Let me know if that takes care of it because I still can't see that gradient.

[darkred]

Thanks again. Yes, it's great now.