As far as I'm aware, as documented by Keith Clark's blog post on pure CSS parallax here, CSS parallax should work in all major browsers except IE, since Microsoft has not as of yet implemented support for transform-style:preserve-3d.
Yet, my own basic implementation of this effect, demonstrated here in this jsFiddle, works in Chrome 39, but does not Firefox 34. The latter does not seem to even be applying the
.back {
transform:translateZ(-2px);
}
style. What is the reason for this? Is there any fix? I've attempted to disable and enable various properties on each element to no success. Yet, I'm at a loss to explain how Keith Clark's implementation here works, yet mine does not.
there are a couple of problems in the HTML that are preventing Firefox from working. The first is that .container with overflow:hidden is a direct parent of your parallax items. Your body tag (which already has the specific parallax overflow settings overflow-x: hidden; overflow-y: auto;) needs to be the direct parent of your parallax-group.
Second, your non-parallax items (the lorem ipsum paragraphs) also need position: relative; and a z-index so you can control the layering. I tried it in FF on your JSFiddle page and it works. I was trying to solve the same problem myself because the non-direct wrapper causes different problems in Chrome.
Related
I’m trying to implement a parallax scrolling effect, and while it works well on Safari and Firefox, Blink-based browsers (i.e., Chrome, Edge, and Opera) keep giving me trouble and I haven’t been able to get them to work. The problem is the content gets clipped, for some reason. Just for testing purposes, this is what I basically have right now:
<div class="outer-wrapper>
<main>
<article>...</article>
<article>...</article>
<article>...</article>
</main>
</div>
Which is styled as such:
.outer-wrapper {
height: 100vh;
perspective: 1px;
perspective-origin: 0 0;
overflow-x: hidden;
}
main {
transform: translateZ(-1px) scale(2);
transform-origin: 0 0;
overflow: hidden;
}
article {
position: relative;
height: 100vh;
}
Each article element has a height of 100vh, and main’s height gets correctly calculated to be 300vh, but its container will not show it in its entirety. With the above code, for instance, I can only see the first two articles, and scrolling beyond that is not a possibility on the aforementioned browsers. In other words, Chrome-based browsers will only show two thirds of main (i.e., 200vh), and nothing I have tried for the past few days has been able to resolve it. I’ve also tried setting the perspective and transform’s origins to the bottom right, by the way (which gets rid of some extra blank space on Safari and Firefox), but Chrome-based browsers will keep presenting the same problem.
Does anybody have any idea why this might be happening and how I could fix it? I feel like I’ve run out of things to try at this point.
I tried the given code on Edge, Chrome, Firefox, IE11 on Windows10 and Safari on iPadIOS13 and experienced the problem with scrolling to the 3rd article as described in the question on all except Firefox and Safari.
There seems to be some clash with setting perspective and overflow on the same element. Removing the overflow-x: hidden; from .outer-wrapper it is possible to scroll to the 3rd article on all these browsers.
As overflow: hidden is set immediately afterwards on main I imagine (but cannot know) that this removal will not break something else in the non-test version.
Putting an overflow-x into .article also causes no problem.
I have searched for similar problems and there seemed to have been some problems in the past with perspective and various other settings but I've not found one describing this particular phenomenon.
It looks like a browser bug because it's hard to see why overflow should have this sort of affect alongside perspective.
I have a website that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.
The page has two elements, nav and main that each have overflow-y: scroll set. This is so they can be scrolled independently of one another. If I scroll the main element, and then hover over the pagination buttons at the bottom, the main element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.
The common thread here is that the pagination buttons and the GitHub symbol on the right both have svg elements. If I get rid of the svg element the bug doesn’t happen. Also if I remove overflow-y: scroll from the main element the bug does not occur.
I’ve also noticed that the issue might be somehow related to having height: 100% set on the <html> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.
Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!
You can fix this by adding the following to body where your grid rules are defined. Sadly, I have no idea why this solves the issue.
body {
…
grid-auto-rows: 1fr;
}
After spending hours and hours on this, the only way I could figure out how to fix it was to switch from CSS grid to flexbox. 🤷🏼♂️
This is the diff that fixed it, if you’re curious.
This is a bug related to safari version 12.1, which is fixed in Safari Technological Preview.
https://bugs.webkit.org/show_bug.cgi?id=197189
However as a workaround in the mean time.
Can you try
overflow-x:hidden, overflow-y: scroll,
height between 50 to 95vh for the specific container depending on your surrounding elements. This is going to have minimal safari jump on hover and probably empty space at the bottom.
Even after Safari bug is fixed, seems that the bug still occurs on some other scenario. I successfully reproduced a similar behavior on Fluent UI dropdown: https://github.com/microsoft/fluentui/issues/23668
The workaround in my case was to change dropdown item height from "auto" to "100%".
this happened while working on a specific project. I had a div with following css:
div.my-div {
position: sticky;
top: 60px;
}
(other styles applying to it as well, none affecting any css values related to position: sticky).
this div would become sticky when the page scrolled and it reached top of the viewport, but with scrolling a bit more would go away as if another sticky element was replacing it. for testing purposes, I commented out all other elements in the page and only inserted a dummy div with sufficient height to enable scrolling, and the behavior stayed the same.
this behavior was also limited to Chrome and Firefox (both latest version) and I could not replicate it in Safari. surprisingly, this css snippet fixed the issue:
html, body {
overflow-x: hidden;
}
setting overflow-x to hidden only on body or html didn't work, and this fix caused other Safari-only scrolling-related issues.
I ended up fixing the problem by changing the value of overflow-x on html and body using JS depending on the browser being Safari or not. however, I feel generally uncomfortable with this solution. anyone else had similar issues? any ideas on what might be causing this and are there any solutions to this not involving JS snippets detecting whether it is Safari or not?
position sticky is still not widely/fully supported in all browsers.
A parent with overflow set to auto will prevent position: sticky from working in Safari
Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers.
are known issues, you can see how widely supported it is and current issues on caniuse.com
There are polyfills available such as stickfill but even these have their limitations.
I've used Stickybits in the past & have been pleasantly supprised if you want to check it out.
stickybits('[your-sticky-selector]')
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
I think I'm going to tear my hair out if I don't figure this out.
http://www.keystoneelderlaw.com/
If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?
I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.
Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.
RESOLVED:
Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".
I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.
In your css add property to #slide
#slide
{
z-index:-999
}
it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp