BrowserWorks
CSS Button transitions not working
What happened?
I honestly don't know if it worked before but I'm on 6.5.6 and transitions on buttons apparently don't work. In the Developer Tools the transition shorthand property is shown but when I expand it the single properties are struck through without them being overwritten.
Transitions on other elements like <li> work well and in other browsers (as well as Firefox) it also works.
Reproducible?
- [x] I have checked that this issue cannot be reproduced on Mozilla Firefox.
Version
G6
What platform are you seeing the problem on?
Windows
Relevant log output
I am also having this issue; it seems to be overwritten by "userChrome.css"?
I can confirm that transition of button elements is overwritten by userChrome.css on version 6.5.10 on Windows.
After adding !important to the CSS rule, the properties are no longer crossed out in Developer Tools however the transition still does not work.
Hi there, just reporting that I have encountered the same problem. I thought I was going mad before I tried it on regular Firefox, then came here to make an issue and was surprised to find yours reporting the exact same thing.
I have not checked userChrome.css myself, but in my case it seems to be down to the transition-duration property being set to 0 no matter what you specify in your stylesheet
Here is a short HTML doc that can be used to reproduce this. Hopefully we can get some feedback on this issue soon.
<html>
<head>
<meta charset="utf-8">
<title>Transition test</title>
<style>
body { background:#222; color:#fff; padding:2rem; }
.nav-bar-inner-right button {
background: #9b5094;
border-radius: 0.6rem;
padding: 0.4rem 0.8rem;
transform: scale(0.98);
transition: transform 1s ease-in-out;
display: inline-block;
}
.nav-bar-inner-right button:hover {
transform: scale(1.25);
}
</style>
</head>
<body>
<div class="nav-bar-inner-right">
<button>Hover me</button>
</div>
</body>
</html>
Glad that i'm not the first to get this error! I am on waterfox 6.6.1 (64-bit) on Linux Arch, and I'm getting this error on a transition of background color, that also don't work with a '!important'
