Rendering issue of styled buttons (psychonautwiki.org)

[19h]

Hey,

there's a weird style rendering issue affecting styled buttons on PsychonautWiki:

I couldn't exactly pin down the issue, but it seems to be related to either the gradient or background styling.

-- K

[KiChjang]

Can you give us the URL of the page you're visiting?

[19h]

Oh, sorry about that. One of the URLs affected: https://psychonautwiki.org/wiki/Main_Page.

[KiChjang]

I can reproduce this issue on latest master.

[KiChjang]

Running servo with incremental layout disabled would not reproduce the issue.

[CYBAI]

Hi @KiChjang
If I'd like to help to fix this issue, could you give me some advises?
Thanks!

[emilio]

@CYBAI nobody has pin-pointed the cause yet (modulo it being related to incremental layout), so we don't know how easy or hard it is to fix.

The first step would be to create a reduced test-case that reproduces the issue, and then investigate it.

[KiChjang]

FTR I tried to make a reduced test case to no avail 2 days ago.

[CYBAI]

@emilio @KiChjang Got it, thanks!

[CYBAI]

<style>
  .container {
    display: flex;
    width: 139px
  }

  .container div a {
    padding: .3em .75em;
  }

  .container div#former a {
    background: #ffefc8;
  }

  .container div#latter a {
    background: #e9f6fd;
  }

  .container div#former a:hover {
    background: #ffdfa8;
  }

  .container div#latter a:hover {
    background: #effffd;
  }
</style>
<div class="container">
  <div id="former">
    <a href="https://psychonautwiki.org/wiki/Donate">Donate</a>
  </div>
  <div id="latter">
    <a href="https://psychonautwiki.org/wiki/Contact_us">Contact</a>
  </div>
</div>

Just tried to make a small test case from the page. From this test case, when you hover on the button, another one will become longer.

If you tried to comment this rule

.container div a {
  padding: .3em .75em;
}

Then the buttons won't become longer on hover.

[CYBAI]

For above reduced test case, I found if setting padding for .container div a with px, it will work fine. But once setting padding with em, we can reproduce the issue.