If I use Nivo Slider on a page with a fullscreen background image, the slide transitions work slow and chopped in IE 7 and 8. In all other browsers, the transitions work smooth.
Here is a very basic example:
http://www.test-case.de/fullscreen-nivo/demo/demo.html
To ensure that the problem is not caused by any JS conflicts, I didn't use any JS for the fullscreen background. It's only a few lines of CSS.
Anybody an idea how to fix that?
Thanks a lot!
Karl
I've managed to partially fix it:
img.full-screen-image { -ms-interpolation-mode: nearest-neighbor; }
Not an ideal solution though.
Related
A Firefox change broke some of my background/border images. See this issue for more details: CSS - New Firefox-release doesn't show Border-Image anymore. When I fixed this issue by adding border-style: solid my text now displays a white/gray background behind it. Any idea why this might be happening. See my image on Chrome (how it is supposed to look) and then on Firefox.
Chrome:
Firefox:
Here is the jsfiddle link: http://jsfiddle.net/nirodhasoftware/offuhxao/1/
You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.
pseudo:
background:#5099D6;
background-clip:padding-box;
element:
background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;
I am using Fancybox v2.1.4 throughout a site with no problem, except in ie8 (even ie7 is ok). When I apply fancybox to a div in ie8, all background css is lost.
Here is what it is supposed to look like, and looks great in all browsers but ie8:
http://hallyb.com/images/good.jpg
And here is how it renders in ie8:
http://hallyb.com/images/bad.jpg
Nothing I change with the fancybox.css affects this black background; in fact, the background color is set to #fff first, with a background image added second Nothing about it says "black".
Thanks for any insight to this problem.
SOLVED!
This one was tricky because I am using PIE (http://css3pie.com) to wonderfully render css3 effects in older IE. For some reason, IE8 does not like it when the PIE.htc behavior file is called on nested elements, such as the fancybox 'wrap' code I am using here. IE7 doesn't seem to care. Remove the duplicate behavior attribute from the fancybox css and all is well.
This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/
I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome.
I've detailed the bug in a video here - http://www.screenr.com/gZN8
The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly.
I'm using compass (#transition-property, #transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to figure it out.
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.
The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.
Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.
Apparently, that's the price you pay for hardware acceleration: all text momentarily turns into images, which causes the drop in render quality.
However, applying html {-webkit-font-smoothing: antialiased} to turn off the sub-pixel anti-aliasing makes this problem go away. That's what I'm doing for now.
UPDATE: Since then, I've also come to learn that this happens only when the browser can't be sure if the section being animated is going to affect the text. This can usually be handled by having the text above (higher z-index than) the elements being animated, and/or making sure the text has a fully opaque background.
I've faced this issue numerous times and have had success adding the following css to the animated element:
z-index: 60000;
position: relative;
It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.
If you look at this example in a webkit browser, chrome, safari
http://freemotive.co.uk/dev/exp2.html
the overflow: hidden set on the span element doesn't seem to work when positioned absolutely.
The general idea is that the span element will hide the image within a circle using border radius.
i've read that it is a bug within webkit, however i'm wondering if there is a work around to solve the issue?
i've played with ideas, but nothing has worked yet.
hope some of you can help.
If I understand you correctly, you're basically trying to "frame" the image within a circle by using a span with border-radius and overflow:hidden... why not try applying the border-radius to the image element itself?