I have been facing a very irritating error with firefox over the last day.
I have replicated the bug here: http://jsfiddle.net/kmz9tv77/1/
There is one container div, with two children, bgpanel a red background div with the text background, and fgpanel a purple background div with the text foreground, and an opacity of 0.5.
The container div has a perspective value of 1px, the bgpanel is translateZ(-1px) and then scaled by 2, to keep the perceived size the same.
The fgpanel is as it is.
The idea is to generate a parallax effect while scrolling. The bgpanel div will move slower, while fgpanel will move at the same speed.
On chrome this works perfectly. On Safari too. On firefox, halfway down the scroll the layer farther away, bgpanel, suddenly decides to vanish. If I force firefox to repaint by going to the element inspector and switching the top property on and off on bgpanel, things work again for a while, but again bgpanel goes off if you scroll down beyond a point.
What's happening?! Am I missing something fundamental here? Help!
Related
I have a <div> of an unknown width (different text can be put into it) which I'm trying to position absolutely and then center using left: 50% and translateX(-50%). This works great except that the box shadow I have applied to the <div> is sometimes blurry.
I suspect this is due to the fact that it does not always have exactly a whole pixel width depending on what text is inside, so when the transform is applied it's falling between pixels and the browser is trying to antialias it.
Check out the JSFiddle here - https://jsfiddle.net/cqky6exx
Any thoughts on how I can resolve this?
When applying:
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#FFFFFF,endColorstr=#000000)";
to a DIV, the gradient behaves as if its an element covering the div and therefore mouse cursor no longer changes nor does mousemove events occur on the div. The only part of the div still responding is the border.
I've googled and cried and put the cows to bed but all to no avail. It displays perfectly but I need to have the containing div respond to mouse events and I've no more hair to tear out.
A happy day indeed it will be when we no longer care about the poor sods using IE8/9
Unfortunately, you're right; that's exactly how a gradient filter works.
I think your only recourse here is to either use a traditional, pre-rendered gradient image as a CSS background, or apply the filter to another element that's positioned directly behind the div (or a :before pseudo-element possibly? I'm not sure how gradients work with generated boxes).
I'm trying to make kind of a "fold-in" effect for a submenu, but i'm having some issues.
See this codepen: http://codepen.io/anon/pen/Lotav
As you can see, by default the submenu has a rotation of 90 deg. When a menu item is hovered, the submenu animates to 0 deg, giving it kind of a folding effect. The problem is, when the submenu starts animating (at 90 deg), it's centered within it's width. Even though the submenu has a width of X pixels, when rotated, the width shrinks and it is then centered within the actual width (X). To achieve the wanted effect, the submenu would have to be positioned to the left when rotated.
The second issue, which i find really strange, is that although i have set the rotation of the submenu to 90 deg, it doesn't quite appear so. It kind of overlaps a little bit. 90 deg should make it completely vertical (and therefore invisible), or am i missing something?
I've only tested the effect in Chrome 24 and Firefox 18. I can't get the 3d effect to work in Firefox, it kind of just shrinks in width, while in chrome you can actually see it rotate. I have the auto-prefix option turned on in the codepen, but i don't know whether it works correctly or not.
Here's a demo of the disired effect: http://davidwalsh.name/demo/folding-animation.php
The only difference is i want it to "fold in" from the left instead of the top.
First issue:change the default transform-origin for the submenu. Use:
transform-origin: left;
Second issue is caused by perspective: 1000; - if you remove it and add it just on hover you won't have this problem.
demo.
I'm encountering something I've never really come across before in IE7. I have a wrapper div with a background image applied to it. This image is supposed to repeat all the way until the end of the wrapper div. In IE7 there seems to be a scrolling issue where if I use the scroll bar to see parts of the page that aren't initially visible, the background image will 'cut off' and not repeat in the last 100px or so. This only happens if I have to scroll to see more content. It's like it doesn't fully load the background image for areas that aren't immediately visible.
What's strange is that if I use the mouse wheel to scroll up and down the page, the background image repeats just fine and as it should. If I use the scroll bar though, it will break randomly (never more than 100px but sometimes just the last 20px, 30, 40 etc).
I've tried the following to trouble shoot so far:
1) Added background color to the div as well. The background color breaks as well so it's not just a background image repeating issue.
2) Added a min-height of 1% to the wrapper div.
3) Added a position: relative to the div. I read somewhere that this fixes a weird IE7 background bug. This didn't help.
Thanks for any help. I'm unsure if there's some hiccup somewhere else in my code that is causing this (which I'll continue to look into) or if it's some well known IE7 issue. Again I just find it odd that using the scroll wheel on a mouse let's the background render as it should. Clicking, holding, and using the scroll bar causes it to break.
EDIT: Here is a link to a screenshot of the horrific problem in action. http://skitch.com/flight/dspeh/ie7bgerror
The top one is with the error. The bottom screen is how it should load.
Another additional thing I noticed: If I minimize the window while it has the broken background and then maximize it again the background image corrects itself.
My guess is that the 3 boxes at the bottom are floating div's. Try this:
#backgroundDiv { overflow:hidden; min-height:100%; height:auto!IMPORTANT; height:100%; }
IE6/7 sometimes bug with min-height. This piece of code will cause IE6/7 to default to 100%... IE sometimes likes to use the last declaration instead of following the !important call; whereas every other browser will use the !important call when displaying the page.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it