i use css3pie for my page to use css3 effects in the ie browsers.
Everything works fine. But now i have a field on my page that has a horizintal scrollbar.
In ie8 everything works finde. But in ie7 i cant scroll dragging the scrollbar. I can only use the arrows on the left and right.
and in ie9 i cant scroll.. i also cant drag the scrollbar. but if i click on the arrows on the left and right the scrolling element directly jumps to the left back..
i use pie v1.0beta5
i found that issue on many sites but there was no solution that works for me..
i have a wrapper arount my page that has a linear gradient background.. if i remove that everything works fine.. but with the gradient background i cant scroll in ie7 and ie9..
does anyone have the same problem and maybe found a solution for this problem?
nevermind, it seems you have to add the -pie-track-active:false to all ancestor elements that use a PIE behavior
Related
I have a div with style overflow:hidden and white-space:nowrap. Then a button that scrolls the div left via scrollLeft += 50. Works fine until I add scroll-behavior:smooth to the CSS of the div. Then it doesn't scroll at all in Safari 15.4. On all other browsers I have tested it works fine. Some ignore the smooth scrolling but it doesn't break the scrolling. In Safari it breaks the scrolling. I have setup a simple test page for this error scrolling test. What am I doing wrong? If this is a bug in Safari any ideas for workarounds?
This is a bug as of Safari 15.4.
Previously, it didn't support smooth scrolling and would scroll instantly. Since the new update, they have introduced an incomplete version of smooth scrolling, the scrollbar is required to be visible for it to work.
The current workarounds are to either use a scrolling library, making your own version/polyfill or checking useragent and give it a version without smooth scrolling if it's Safari.
WebKit Bugzilla Link: https://bugs.webkit.org/show_bug.cgi?id=238497
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
Has anyone got any idea why the menu is rendering below the rotating images on this site in IE7: http://new.coffeelatino.co.uk/.
The z-index is much higher for the menu that it is for the rotating images.
Just another reason why IE is so dreadful.
z-index is ignored for elements that are not positioned. Add "position:relative" to the style of whatever you're trying to apply a z-index to, and that should fix it.
Hint for remaining sane as a web developer: Write against IE, then test with other browsers. Most things that work in IE will render correctly in FF and Chrome. The reverse, as you've noticed, is not true.