Closed
Bug 1393109
Opened 7 years ago
Closed 5 years ago
Hover style is broken in Firefox (works in Chrome) - musicismysanctuary.com
Categories
(Web Compatibility :: Site Reports, defect, P3)
Web Compatibility
Site Reports
Tracking
(firefox57 affected)
RESOLVED
WORKSFORME
Tracking | Status | |
---|---|---|
firefox57 | --- | affected |
People
(Reporter: kumar, Unassigned)
References
()
Details
(Whiteboard: [sitewait] [css] )
Attachments
(2 files)
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).
Reporter | ||
Comment 1•7 years ago
|
||
Chrome Version 60.0.3112.90 (Official Build) (64-bit)
Updated•7 years ago
|
Component: General → Untriaged
Updated•7 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
(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)
Depends on: 1376082
Comment 3•7 years ago
|
||
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.
Flags: needinfo?(kumar.mcmillan)
Reporter | ||
Comment 4•7 years ago
|
||
It's the same with that pref set to either true or false (btw, it was false for me)
Flags: needinfo?(kumar.mcmillan)
Comment 5•7 years ago
|
||
(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.
No longer depends on: 1376082
Updated•7 years ago
|
Priority: -- → P3
Comment 6•7 years ago
|
||
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•7 years ago
|
||
Let's mark it Tech Evangelism for now. If we need to alias clip-path, that can be done in a separate bug.
Component: Layout → Desktop
Product: Core → Tech Evangelism
Updated•7 years ago
|
Whiteboard: [needscontact] [css]
Comment 8•7 years ago
|
||
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•7 years ago
|
||
contact form |
contacted through their form.
Whiteboard: [needscontact] [css] → [sitewait] [css]
Comment 10•7 years ago
|
||
contact email |
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•6 years ago
|
||
Karl, have you heard anything back from the agency? This issue is still reproducing.
Flags: needinfo?(kdubost)
Comment 12•6 years ago
|
||
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 ! :)
Flags: needinfo?(kdubost)
Assignee | ||
Updated•5 years ago
|
Product: Tech Evangelism → Web Compatibility
Comment 13•5 years ago
|
||
It looks like the site was redesigned without these hover transitions. Looks the same in Chrome and Firefox now.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•