I'm having some troubles using a link and an input element simultaneously, which is pretty odd!
CSS transitions are being fired upon load, even tho I'm using an hover effect and only if the input element is present on the site. All this is for Chrome, haven't tested this in other browsers.
Here is my code simplified to the issue at hand:
HTML:
<input type="text" placeholder="Test search" />
Test
CSS:
a {
background: #000;
transition: background 3s ease;
}
a:hover {
background: none;
}
Link to example: https://embed.plnkr.co/ri5FknRdbPDY7T2lNldS/ Try and refresh the live preview a couple of times to see the issue. (This will not work on JSFiddle or Codepen, simple because they use internal styles. To reproduce this problem the styling has to come from an external stylesheet which is why I created this on Plunker.)
If I inline the css code in style tags in the head, there is no problem. If I remove the input element, there is no problem either. And it seems only to be a problem on link elements.
What is going on here? :)
- Thanks!
This is a Chrome bug, and it has been reported.
A hacky way to fix this is to include a script tag somewhere on the site.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
the css code posted below seems to work fine in internet explorer and google chrome but when in safari the a:hover effect seems to only apply when i right click the element or when I go into inspect elements and click hover from the options for that a tag in the right sidebar. I believe that this problem may be due to http headers as I can see no problem in the source code. The url in question is available here
and the css code in question is:
#swag a:hover {
color: black;
}
and the html is the following:
<p>Mouse over and click the link:
<div id="swag">
example.com
</div>
</p>
A full reboot of my macbook has solved my issue. The nature of the issue is still unknown to me.
I'm designing a html page with strict doctype and there's a form element in my page.
What I want to do is to change background-color of inputbox when mouse touches my form. I've done this with css :hover selector on form tag, but problem is that IE only understands hover on "a" tag!
I've googled my problem and what I found is to:
using an htc file;
using javascript to create a hover class on elements;
creating a big "a" tag and put all elements inside it;
but I don't want to do any of these solutions!
Isn't there any better way to fix this problem in IE?
My HTML Code:
<form id="footer-search-form" title="Search" action="#action">
<fieldset>
<input type="text" class="footer-search-input" id="q" name="Search"></input>
<input type="button" class="footer-search-button" title="Search" value="Search"></input>
</fieldset>
</form>
My CSS Code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: and after hours of searching I did it by using js:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"
and
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
I hate it, but it seems that there's no better way...
You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.
IE has supported :hover on any element since IE8 (or even IE7? I don't remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn't have an auto-updater - it really needs one), but for something as simple as this aesthetic effect you really don't need to worry about support in old relics.
http://jsfiddle.net/danielcgold/SYgzJ/
When you click on the input then go on blur, artifacts are left on the screen in Chrome 15. I first noticed this issue on a site i've been developing so I eliminated everything but just the input field and a button. When I remove the button, the transition happens just fine. Any ideas?
Add this CSS to your input field:
input {
-webkit-transform: translate3d(0,0,0)
}
This will force Chrome to use your GPU to do all the rendering which will solve the artifacts problem and make your animations smother.
This is a bug in Chrome's rendering of CSS transitions. But you can workaround it by forcing element "refresh" operation. Please note that you need to refresh not the input element, but it's parent, so the following code will help you:
$(document).ready(function(){
$('#test').blur(function(){
$(this).parent().addClass('repaint');
});
$('#test').focus(function(){
$(this).parent().removeClass('repaint');
});
});
And repaint class should have something related to parent's view, for example different color:
.repaint {
color: red;
}
But you may replace color with visibility or other view-related (but not important/visible for parent) attribute.
Here is jsfiddle to demonstrate the workaround
I had a similar problem with box shadow artifacts in Safari, and found adding -webkit-transform:scale(1); to the focus rule fixed the problem.
See http://jsfiddle.net/SYgzJ/48/ – it should work fine now.
As Cesar said, -webkit-transform: translate3d(0,0,0); will fix it, but it can affect text rendering too.
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel