I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
Related
The problem is the following: I have a gallery plugin on Wordpress, called Fancy Plugin installed. Works fine, except now when I look at the gallery, the images are very very faint (the opacity is very low), then, if I hover over the image, it gets less opaque, then I hover again and it gets better and better. I need like 10-15 mouse passes for the image to be on opacity close to 0.9, but then it does not change anymore. I want to switch this off completely, I do not want any kind of opacity in the gallery, I want it to be 1. I don't know what CSS to use to do this.
I tried inspecting with Chrome DevTools, that's how I found this piece of code:
<img class="fg-thumb" src="http://www.faktumkft.hu/wp-content/plugins/radykal-fancy-gallery/admin/timthumb.php?src=http%3A%2F%2Fwww.faktumkft.hu%2Fwp-content%2Ffancygallery%2F2%2F2%2Fvizszintes_palcas_korlat__09.jpg&w=200&h=150&zc=0&q=100" alt="Vízszintes pálcás korlát, ívelt" style="width: 200px; height: 150px; opacity: 0.825593;">
I can see the weird opacity number that seems to be kind of random, there, but I don't know how to change it. Can someone help please? Thanks!
Fast fix would be adding next to your css:
.fg-thumb{
opacity:1 !important;
}
However what you find pointing to so called in-line styles, and they may come from some javascript (may be from that plugin). You may want to read some documentation or/and check source code if it is available.
I am looking for solution, but can't find anywhere. I have block and I have other block under it. The first block has style "opacity: 0". So he is at the top of the other block and in that block (which opacity is 0) has few elements. The problem is there, that mozilla opacity: 0 accepting as display: none and i don't know why is that.
any solutions?
If you set the opacity of the parent to 0, then all his elements will be hidden.
Maybe tell us what are you trying to do and we'll try to find a better idea that will answer the terms.
First of all, your JSFiddle - jsfiddle.net/5zWZe/1/ doesn't use opacity. So this example seems unrelated to your question.
For an example with a button covered by a div, see this JSFiddle - jsfiddle.net/X7S3w/2/. As you can see, the button isn't accessible through the div, even if you reduce the opacity to 0. Also note, the behaviour is the same in either Firefox or Chromium.
It seems, you have a special case with an iframe and flash video. See this other JSFiddle - jsfiddle.net/X7S3w/3/ with identical CSS, but the button replaced by an iframe. Here the flash video is accessible, although the div is above the iframe. But again, same behaviour in Firefox and Chromium.
Covering the iframe/flash video with the div seems to work, when you modify the query string of the youtube URL and append ?wmode=transparent
<iframe id="without" src="http://www.youtube.com/embed/5f-n3-pV81A?wmode=transparent"></iframe>
<div id="opacity">opacity</div>
See this JSFiddle - jsfiddle.net/X7S3w/4/ for a working example. Now the div blocks the flash video successfully. And again, this works identically in Firefox and Chromium.
So it seems this is more a flash issue, than some CSS opacity behaviour.
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.
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.