It's clear that setting opacity to anything but 1 hurts performance on the ipad.
Webkit animations performance on IPad
I am working on a feature that would benefit immensely from setting the opacity of some elements to less than 1.
The problem is that as I scroll down the ipad, any element which has opacity less than 1 isn't displayed. Only when scrolling stops are the elements rendered properly. Can anyone think of a trick to achieve the same affect that I need?
The same thing happens with positioned elements on the iPad. You could probably overlay the thing you are trying to make opaque with a semi-transparent PNG image. It's hard to say how difficult this would be without seeing your markup, but it probably wouldn't be too bad.
Solution 1:
If you are using a solid background you could try overlaying a transparent png.
solution 2:
or you could create a image sprite png. or even jpg really depends on your background. you would add an overlay say in photoshop instead of actually over it and would be swapping background positions.
solution 3:
having a png with transparency background width 100% height 100%.
<div id="bg"></bg> <-- set z-index to 1
<div class="element dead"></div><-- set z-index to 0
<div class="element alive"></div><-- set z-index to 3
The dead elements will show up behind the bg looking as if they had faded out.
See this in action here: http://jsfiddle.net/cma9B/2/
Also depending on if you need the user to interact with the elements makes a difference which route you will want to go.
Related
There appears to be a bug in the behavior of backdrop-filter: blur() on both Chrome and FireFox browsers (at least on Mac OS). This problem is not present on Safari.
Video of bug
I have created a CodePen demo of this problem:
https://codepen.io/beefchimi/pen/vYjmQKO
Scenario
ElementA is a <img />.
ElementB is a <div /> that overlaps ElementA (via grid, or position, etc... exact layout doesn't appear to matter).
ElementB applies a backdrop-filter: blur(10px).
The parent wrapper of these elements has an opacity value below 1.
Problem
The moment the shared parent of these elements drops its opacity, the backdrop-filter: blur() effect does not render correctly. It still applies a blur... but that blur appears to lose intensity the closer it gets to the edge of the underlying element. In other words, the edge of the underlying visuals appear crisp, while further from the edge becomes blurry.
This problem goes away the moment you apply a fully-opaque background style to the parent.
Requirements
In my specific use-case, I cannot apply a background style to the parent. The underlying page uses a background-image that I do not want to conceal.
Questions
Is there any clever trick to getting this blur effect to work as desired?
Have I got something obvious wrong in my CodePen demo?
Is this a legitimate bug in the implementation of backdrop-filter: blur(), and should it be reported to all affected browsers?
Thank you in advance for any assistance.
I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
I have a few divs with a repeating background PNG (that as an alpha channel set to ~50% opacity); the purpose is to give a white transparent background to the divs. The divs render great in all current browsers. But when I call my Cufon code to replace certain text on the screen, the backgrounds seem to fade out in a gradient fashion from top left to bottom right (in IE only). It doesn't seem to effect all PNG backgrounds, just certain ones.
Something with Cufon is definitely getting in the way of rendering the transparent PNGs. Has anyone ever seen this functionality?
I used cufón 18 months ago but that was for headings and labels over white or colored background so I can't help you on this one.
If I had a similar need today, I'd use #font-face as Fx3.0 and others are disappearing very fast, being replaced by Fx3.5+ and other recent browsers. Do you have a constraint that prevent you from using this IE-compatible feature?
A few questions if it can be of any help:
do these elements have hasLayout (with zoom: 1; if they don't already have a width, height, ...) or their parents.
is it always the same elements that work and don't work?
what happens if you replace one background displaying OK with another that isn't OK? Is this the same element that have a problem or the same background or does something else happen?
Cufón wasn't causing the problem; it was just masking it. The real problem was the fact that I was using transparent .pngs that were 1px x 1px. IE will render them incorrectly and fade them out; almost as if they were being stretched beyond limit.
Use a larger background image - 10px X 10px or more.