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.
Related
I would like to resolve, in some elegant way, a design problem which only happens in Chrome.
When I wrap “input” type checkbox with div which has bootstrap class col-…. This div div is filled by checkbox, but in Chrome the checkbox also changes size (gets bigger)
I found a solution, which basically resolves problem, but is not ideal.
#media (-webkit-min-device-pixel-ratio: 0) {
[class*="col-"] input[type=checkbox] {
-webkit-transform: scale(0.5) !important;
}
}
JSFiddle example
Firstly, I need to make this rule for Chrome only, because according to MDN this not best practice.
Secondly, the change of scale not only affects the size of the check box, but also everything within the div. Due to that, I lose the feature, that customer must not click exactly into the check-box to get it checked.
Is there any better solution?
Well your problem is that in your code presented in the JSFiddle, you are using form-control class which has fixed height. Regarding FF and Chrome behaviour, it seems that only Chrome actually lets you to set the dimensions of checkbox using CSS...
I recommend you to check the Bootstrap docs and see how the checkbox is implemented in Bootstrap.
I have a fairly simple 3d transform which is essentially a bunch of flip cards which can be flipped front to back and vice versa. When they are flipped I want the animation to overlap the other cards. This works perfectly in Firefox however the animation occurs underneath the other cards in Webkit.
Fiddle is here: https://jsfiddle.net/ojdavey/kwf8vLLx/1/
If you click the "Flip" button in both Chrome/Safari and Firefox you'll see how it works differently.
I've tried a couple of things such as setting:
transform-style: flat
for the other cards while the card is flipping but that didn't seem to work.
Any help would be much appreciated!
A possible solution is to set the z-index on the parent container, when a card is flipped, like:
.box.flip.active {
z-index: 1;
}
Remove this class from all elements and add it to the current card before you flip it either way. This works in Safari as well as in Chrome.
Demo
Try before buy
The demo includes the updated JavaScript code too. This is not optimized. It's only to demonstrate the behavior:
$(".flip .flip-button").on("click", function() {
$('.col4').removeClass('active');
$(this).closest(".col4").addClass('active');
$(this).closest(".card").addClass("flipped");
});
$(".flip .close").on("click", function() {
$('.col4').removeClass('active');
$(this).closest(".col4").addClass('active');
$(this).closest(".card").removeClass("flipped");
});
I'm getting an odd redraw issue in chrome:
See the broken right side? This is a div with a single background img.
HTML
<div id="resultsSortFilter>
<!-- ... -->
</div>
CSS
#resultsSortFilter {
float: left;
width: 712px;
height: 109px;
margin: 7px 0 0 8px;
background: url('../images/search_sortfilter_bg.png') no-repeat;
}
No issues in any other browser
Happens on newer versions only, we blocked the update to prevent this causing issues internally.
Seems to be triggered by scrolling up and down before rendering is finished.
Same issues on multiple sites
Has anyone else seen this? Anybody knows what's causing it or what Chrome intends to do about it?
Chrome version 26.0.1410.64 m
Update
The issue is on Windows and Mac OS. In fact seems worse on Mac.
I might have pinned it down further. We get the error on a page that contains lots of large images. I'm wondering if it has to do with the size of the data Chrome has to download?
This appears to make the issue go away (not going to call it a fix):
"It might be that the newer version of Chrome simply does not like
your GPU. I have had issues similar to yours and have solved them by
turning off the compositing and 3D acceleration features.
Type
chrome://flags into the address bar and set the following items:
GPU compositing on all pages: Disabled (Three options in a drop-down.)
Disable accelerated 2D canvas: Enable (Click the link that says
'Enable', the box will turn white.)
Disable accelerated CSS
animations: Enable (Like above, the item will turn white.)
Then click
the button that shows up at the bottom of the page Relaunch now to
restart chrome and test if this worked."
From https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior
Update
The issue seems to be gone in later versions of Chrome.
Chrome is getting buggier. Something worth trying is forcing gpu hardware acceleration on the element.
Add this to the CSS to force hardware acceleration:
-webkit-transform: translate3d(0, 0, 0);
I have had problems with this in webkit browsers, not only Chrome.
I solved it by placing the following rule on my CSS:
html *:not(svg) {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}
This applies hardware acceleration on all elements except for svgs on FF/IE/Safari/Chrome if supported.
I do not apply the transformation on SVG tags since for some reason this was causing my svgs to not render properly, oddly applying this to the elements like rect inside the tag itself causes no problems.
So try to add this rule to your css and see if it solves your problem.
I have had this kind of issue when toggling display:none; display:block;
For example with jQuery.toggle()
The element in question was just a wrapper for the content I wanted to show and hide. So this is its parent which would expand or shrink vertically. It would look like this:
<div class="parent">
<div class="child-to-toggle">
</div>
</div>
child-to-toggle had no styling rules and, when hidden, a part of the parent wasn't redrawn correctly. (the bottom part)
Then, I added a css rule to child-to-toggle and the problem was solved. It looks like adding a css rule will force some redrawing in that case.
Despite the accepted answer, I am adding this one because enabling hardware acceleration on my computer, Macbook pro, OSX Maverick, Chrome 36, would completely mess up the UI with artefacts so I had to find another way.
Adding a css rule might help. In my case I added a border-top to child-to-toggle.
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.