When trying to use Shadowbox with IE6 the overlay transparency simply not works, it remains completely black. In all other IE versions (7, 8 and 9) the overlay works just fine. Do you guys have any idea to why this is happening?
If you wanna check out what I'm talking about, you can test the examples on the project's web site, they also do not work in IE 6. You might notice that the buttons are also not displayed, as they are .png images with transparent background, however this can be easily fixed by creating .gif images and setting them specifically for IE6.
Links:
Main page: http://www.shadowbox-js.com/index.html
Thanks,
I seriously advice you to give up, because people that still use IE6 are seeing a weird, ugly, cracked web all the time and they just dont care. You may spend days struggling with weird ways of overcoming a problem that comes from the simple fact that ie6 was not made for transparency at all.
GIFs wont work for you. Wanna know why? Because opacity of gifs is either 100% or 0%. In Shadowbox you will want middle opacity, like 50% or 70%. PNGs might work with pngalpha js scripts, but they tend to fail in animations, which are used for shadowbox.
Please understand that i'm not flaming here, i'm just trying to be honest with you.
Related
If you do encounter opening this question and if you dont know the answer. please upvote it so that i and many others can get answers.. Please dont downvote anyone please!
I want to get the best performance i can on animations for my landing page of my project, I am trying GSAP and raw css and i think none are helping performance gets too laggy at times,
-> I have seen many websites using hardcore and way more complex with animations going sweetly silk continuously and supporting all platforms including mobile phones mostly as well, but my animations are chirpy even when running at PC,
I have been trying to get the solutions, have tried to
remove all the other animating properties other than transform or
opacity and
have added css 3d transform hack ,
Using Gsap as well none are helping,
and now i am out of ideas how to get it working, if anyone wants to see my site, this is the link :
webkrushers.com/test/template
Note:
the preloader animation (only css) lags sometimes while loading and the home screen animation as well (the stars are animated via gsap,the BG is moving through css transform and the world is rotating with css transform as well), when i am doing one more animation which is that i want to stamp the big logo and world and then fade it out, it just gets done in steps not smoot at all,
if we get through this i have one more place where animations are not going so well. Hope to get it all sorted and that someone else also learns something from the solutions. you can see it, its in development not so responsive, so open it up at 80% zoom on full HD screens and 67% on HD screens. I would really like help from anyone who can assist me along the way, if he/she feels so. I would also like some recommendations on bettering my UI if someone sees some improvement or replacement that can be made.
Should i try some other thing like, canvas,webGL or web animation API or anything else considering that i want full support till IE9 and mobile devices as well but i dont need the home animation on phones essentially just the loading animation is need in phones.
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.
I am using text-shadow for all p and headline tags (2px white glow for better readability), everything works fine until page is scrolled and javascript changes absolute positioning on one element to fixed - which I want to stay visible.
Is there any way apart of changing style for opera to make it scrolled smoothly? overflow:auto is not working in this case...
Thanks
it's hard to say 100% without seeing the code, but I guess that the way you've styled this page makes Opera do a lot of reflowing and painting when it is scrolled, and the combination of styles will make this a very expensive operation. (It would be nice to see a jsfiddle or get a link to the actual page, this would also make it simpler to advice on possible workarounds).
There are various fixes you could try - like keeping the element you want on-screen styled with position:absolute and move it from JavaScript after scroll events, or simply avoid setting position:fixed in Opera and letting the element scroll away for better scroll performance.
However, I'd strongly recommend that you first report a bug to Opera. Why?
The reason and the genesis of the web is collaboration. It may not be obvious to (understandably) frustrated web developers struggling with browser bugs, but they have a responsibility for helping browser vendors improve when they find problems, thereby contributing to moving the web forward. A minority browser like Opera admittedly has less development and QA staff resources, but to some extent support from the user community and "normal" web developers makes up for this and makes it possible also for smaller players to develop in the Web ecosystem. I think that's one of the web's strengths and the real reason why no single corporation has been able to dominate it.
So please report your issues and problems :)
This is a problem with Opera, not any way you've written the code. Opera is a gigantic steaming pile of doo-doo with almost no market share, and you should use another browser.
That's basically all anyone could tell you here, unfortunately. I understand that everyone loves their browser of choice but some just don't handle these things well. Other examples: browser with a poor javascript engine rendering animations erratically and jerky, etc.
I'm working on an example of a jQuery notification bar that you can see here: jQuery notification bar example
But for whatever reason the CSS I'm using to define transparency in IE 7 and 8 is not working. If you look at the example in IE 7/8, you will see that the transparency for the .png close button and the transparency for the "reopen" element does not work.
I've successfully defined an element's transparency in IE using this code before, but I can't figure out why it's not working in this example.
I thought I might have hit on something when I read this post, but after trying out the solutions mentioned with the hasLayout property I still didn't have any luck.
Any help would be greatly appreciated. Let me know if you need any additional details.
Thanks!
Wow somebody else just asked a question about this. In older versions of IE, you can't compose transparency from a PNG alpha channel with transparency from a CSS effect. As soon as you apply the style, it quits trying to do transparency from the image.
Yes, it's profoundly lame.
opacity: 0.50;
filter:alpha(opacity=50);
This fixes opacity for IE. Using 50% transparency as example value here.
As for the hellobar_close, give it a background-color and it should work. IE has poor support for transparency in .png images.
OK I believe that with the help of the answers provided above and some additional research on my own I have answered my question.
There are actually 2 parts to this problem:
1.) Transparency issues with the .png close button in IE - This part was answered by Pointy above. According to Pointy "The browser is incapable of managing the compositing of the transparent PNG concurrently with any opacity effect on the image. In other words, for any given pixel, you either get alpha channel effects from the PNG itself, or from an opacity filter, but not both." (Quote taken from his answer at IE7 and "jaggies" around layered PNGs (with jQuery))
What I want to happen is for the .png close button to be semi-transparent in it's normal state, and full opacity in its hover state, but apparently this is not possible to achieve in IE using only one single image and CSS transparency. So to get around this I'm just going to have to make a dual-state .png image to get a nice hover effect, rather than relying on CSS transparency to handle that component.
2.) Transparency issue with the "reopen" button - This button should be semi-transparent but did not work in IE. After doing some extensive research on my own I came across this post: jquery IE Fadein and Fadeout Opacity. woodstylee's answer in that post solved my problem.
Due to some weird IE bug that I don't completely understand, I need to declare the element's opacity using jQuery/javascript before any transition/fade effects are applied.
Obviously there is some kind of conflict with jQuery fades/transitions and CSS opacity in IE. If anyone else has some additional info on this subject please post!
When I updated my code with the following, I was able to successfully get my "reopen" button to appear semi-transparent in IE.
$('#hello_mini').css('filter', 'alpha(opacity=75)');
Note that the above line of code needs to be placed before this line:
$('#hello_mini').show('slow');
Also of note... this IE bug appears to only apply to the jQuery show() and hide() functions. When I switch the animation to slideUp() or slideDown() the transparency works fine without any additional javascript.
So bottom line... there is something weird going in with CSS transparency in IE when applied to elements animated through jQuery show() and hide()
If I find out anything else in my research I will post it here.
Here is a link to my updated example, which works in IE 7/8 now.