1393109 - Hover style is broken in Firefox (works in Chrome) - musicismysanctuary.com

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[Kumar McMillan [:kumar]]

Attachment: Screencast of broken style in Firefox

This URL has some hover styles that appear to be broken: http://www.musicismysanctuary.com/coastin-5-hosted-spacewalker?platform=hootsuite

I am testing in today's Nightly 57.0a1 (2017-08-23) (64-bit). It's also broken in 56.0b2 (64-bit).

Comment 1

[Kumar McMillan [:kumar]]

Attachment: Screencast of working styles in Chrome

Chrome Version 60.0.3112.90 (Official Build) (64-bit)

Comment 2

[j.j.]

(In reply to Kumar McMillan [:kumar] (needinfo all the things) from comment #0)

> This URL has some hover styles that appear to be broken:
> http://www.musicismysanctuary.com/coastin-5-hosted-
> spacewalker?platform=hootsuite

If the problem is flickering/oscillating on hover, this might be related to bug 1376082 (aka bug 302561)

Comment 3

[Bobby Holley (:bholley)]

Does the problem persist if you set |layout.css.servo.enabled| to |false| in about:config? No need to restart your browser, just refresh the page.

Comment 4

[Kumar McMillan [:kumar]]

It's the same with that pref set to either true or false (btw, it was false for me)

Comment 5

[Bobby Holley (:bholley)]

(In reply to Kumar McMillan [:kumar] (needinfo all the things) from comment #4)
> It's the same with that pref set to either true or false (btw, it was false
> for me)

Thanks. It's helpful to know that it's not related to Stylo.

Comment 6

[Xidorn Quan [:xidorn] UTC+10]

So the issue here is that, in their stylesheet, they have the following code for :hover:
> clip-path: polygon(50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
> -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0);

Apparently the two shape is not the same. Since Firefox doesn't recognize -webkit-clip-path, we use the first shape, which is broken.

If Chrome drops support of -webkit-clip-path, the same issue would happen.

So I think this is mostly a tech evangelism bug. But we can also fix it via aliasing -webkit-clip-path to clip-path just like WebKit and Blink do for webcompat.

Comment 7

[Xidorn Quan [:xidorn] UTC+10]

Let's mark it Tech Evangelism for now. If we need to alias clip-path, that can be done in a separate bug.

Comment 8

[Karl Dubost💡 :karlcow]

The current style is

.artist-spotlight .vw-post-box-thumbnail img.wp-post-image:hover, .category-artist-spotlight  .vw-featured-image img:hover,
.exclusive-preview .vw-post-box-thumbnail img.wp-post-image:hover, .category-exclusive-preview .vw-featured-image img:hover,
.mims-forgotten-treasures-compilations .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-forgotten-treasures-compilations .vw-featured-image img:hover,
.here-now .vw-post-box-thumbnail img.wp-post-image:hover, .category-here-now .vw-featured-image img:hover,
.interview .vw-post-box-thumbnail img.wp-post-image:hover, .category-interview .vw-featured-image img:hover,
.mims-lists .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-lists .vw-featured-image img:hover,
.mims-releases .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-releases .vw-featured-image img:hover,
.guest-mixes .vw-post-box-thumbnail img.wp-post-image:hover, .category-guest-mixes .vw-featured-image img:hover,
.playlists .vw-post-box-thumbnail img.wp-post-image:hover, .category-playlists .vw-featured-image img:hover{
	-webkit-backface-visibility:visible;
	transition: all 200ms ease-out;

	/* mask pentagon : hover */

	clip-path: polygon(50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0);


}


It needs to be changed by 


.artist-spotlight .vw-post-box-thumbnail img.wp-post-image:hover, .category-artist-spotlight  .vw-featured-image img:hover,
.exclusive-preview .vw-post-box-thumbnail img.wp-post-image:hover, .category-exclusive-preview .vw-featured-image img:hover,
.mims-forgotten-treasures-compilations .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-forgotten-treasures-compilations .vw-featured-image img:hover,
.here-now .vw-post-box-thumbnail img.wp-post-image:hover, .category-here-now .vw-featured-image img:hover,
.interview .vw-post-box-thumbnail img.wp-post-image:hover, .category-interview .vw-featured-image img:hover,
.mims-lists .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-lists .vw-featured-image img:hover,
.mims-releases .vw-post-box-thumbnail img.wp-post-image:hover, .category-mims-releases .vw-featured-image img:hover,
.guest-mixes .vw-post-box-thumbnail img.wp-post-image:hover, .category-guest-mixes .vw-featured-image img:hover,
.playlists .vw-post-box-thumbnail img.wp-post-image:hover, .category-playlists .vw-featured-image img:hover{
	-webkit-backface-visibility:visible;
	transition: all 200ms ease-out;

	/* mask pentagon : hover */

	        clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0);
	-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0);


}

aka the same values.


The contact us page is http://www.musicismysanctuary.com/contact-us/

Comment 9

[Karl Dubost💡 :karlcow]

contacted through their form.

Comment 10

[Karl Dubost💡 :karlcow]

The Web site was done by http://tonton.ca/
The agency has closed in October 2016.
The clients have been transferred to http://www.augustelouis.com/

I contacted this agency by email too.

Comment 11

[Adam Stevenson [:adamopenweb]]

Karl, have you heard anything back from the agency? This issue is still reproducing.

Comment 12

[Karl Dubost💡 :karlcow]

On september 21, 2017, we received an ack from the agency telling us that they would follow up with the client. Sending adam the email. 

> Bien reçu, merci Karl.
> Nous allons faire le suivi avec le client.
> 
> Bonne journée et bravo pour votre implication avec la fondation Mozilla - vous êtes des anges numériques ! :)

Comment 13

[Mike Taylor [:miketaylr]]

It looks like the site was redesigned without these hover transitions. Looks the same in Chrome and Firefox now.