Box disappears when mouse is hovered over it

User Help for Seamonkey and Mozilla Suite
Post Reply
User avatar
fixit7
Posts: 233
Joined: May 19th, 2015, 3:11 pm

Box disappears when mouse is hovered over it

Post by fixit7 »

When I post a question here, the box for "post your question" disappears when I hover my mouse over it.

https://askubuntu.com/

It acts normally with Firefox.

Since it works ok with FF, I feel that it is some kind of Seamonkey issue.

Any idea what is causing it?

Thanks
User avatar
DanRaisch
Moderator
Posts: 127232
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: Box disappears when mouse is hovered over it

Post by DanRaisch »

Have you tried Mozilla Safe Mode?
User avatar
fixit7
Posts: 233
Joined: May 19th, 2015, 3:11 pm

Re: Box disappears when mouse is hovered over it

Post by fixit7 »

I tried safe mode, but no change.

I was told it was due to how the web page is written.

The button has this CSS background-color from its class s-btn__primary:
var(--theme-button-primary-background-color)

<https://blog.logrocket.com/how-to-creat ... 744105c74/>
for discussion of this syntax. These CSS variables are part of a site theme.

--theme-button-primary-background-color means --theme-primary-color,
which is hsl(12.87958115,76.70682731%,48.82352941%) -- call it "brick";

On hover, the button gets its background-color from its class

var(--theme-button-primary-hover-background-color)

--theme-button-primary-hover-background-color means
--theme-primary-color-darken-5, the brick colour with 43.82352941%
lightness.

--theme-primary-color-darken-5 is defined using calc(), like this

hsl( h, s, calc(var(--theme-primary-color-l) - 5%)

but units inside calc() were not supported until FF57, and not in
<color> context until FF59. In SM 2.53.6, FF52, etc, apparently colours
specified with calc() default to white. SeaMonkey needs to acquire the
Stylo CSS engine.

Notably the button text is styled white regardless of hovering, as the
theme doesn't contain variables like --theme-button-text-color and
--theme-button-text-hover-color.

Consequently the button seems to disappear on hovering.

This CSS can be injected to correct the display for the default site theme:

.s-btn__primary:hover,.s-btn__primary:focus,.s-btn__primary:active {
color:#fff;
background-color:hsl(12.87958115,76.70682731%,43.82352941%);
}

An extension like StyleM is good for this.

Why anyone would think it's worthwhile to create this CSS is a mystery.
Affordance effects like button hovering ought to be consistent across
not just the browser and all websites displayed in it but all other
applications on the same GUI platform.
Post Reply