search

ryceg / Eigengrau-s-Essential-Establishment-Generator

A town generator that is suitable for out of the box play in any fantasy TTRPG setting.
https://eigengrausgenerator.com
MIT License
822 stars 151 forks source link

Hovering over "Roll a new town" shifts the banner down by a pixel or two #762

Closed rhi-gray closed 2 years ago

rhi-gray commented 2 years ago

Describe the bug

On the landing page, if you hover over the "Roll a new town" button in the top right, the different CSS applied to the element causes the "Eigengrau's Essential Establishment Generator" banner to move down a small amount in Firefox. This is not an ideal user experience.

It's hard to see in the pictures, but very obvious if you have the page open in Firefox:

Screenshot from 2022-08-27 13-58-00 Screenshot from 2022-08-27 13-58-17

To Reproduce (bugs MUST be replicable)

Town Seed (click here for info): any seed

Page to navigate to, buttons to press, etc:

Go to the landing page and open any town. Hover over "Roll a new town". The banner will shift down a small amount when you are hovering over "Roll a new town", then return to its original place when you move away.

Additional context

This affects Firefox, but does not seem to affect Google Chrome. It's probably something to do with the .restart and .restart:hover CSS rules. Looking at the differences between how padding vs margin vs border change element positions would be a good place to start.

Kalekdan commented 2 years ago

I will take a look at this - worth noting that this does not occur in the live version (https://eigengrausgenerator.com/)