I have been making some modifications to an existing website and a strange issue seems to have arisen. After scrolling down, and then back up, some div elements on the page are disappearing. The problem only seems to appear when using Safari on a desktop. Moving the mouse seems to cause the divs to immediately reappear...
Our jQuery uses some 'on scroll' triggers but these have never caused any of the problems that appear now, and I suspect that this is not the cause of this strange problem.
The problem on the page can be viewed here http://www.upreach.org.uk/2014/about.php
I've never experienced a problem like this and am quite perplexed about what could be causing it.
Some fixes you can try :
give to the .shell element a big z-index and be sure it always has a position relative (not right now):
.shell {
width: 800px;
margin: 0 auto;
position: relative !important;
z-index: 9999;
}
if you can, don't put your background as an image with a fixed position, it occurs some bugs in some browsers, do the same with :
body { background-attachment : fixed; }
(Yeah, you'll need to put your background image in the body).
Just in case somebody else is having this specific issue in the same way I was. Check if you are using transform-style: preserve-3d. That was the problem for safari in the wrapping divs of my virtual scroll.
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.
Just figured out that one specific div is hidden in Safari. - For both Mac and iPhone. I have tried searching for the problem, but I can´t figure out where it all goes wrong. It looks like the div container is misplaced.
Please see attached images to see how the container is moved.
Chrome
Correctly placed.
Safari
Misplaced
By adding the following to container it gets positioned almost correctly:
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
}
But then the hamburger menu does not work. So I don´t believe it should be set to position: absolute, but must be some other code that is either not valid in Safari, or something important has been forgotten.
Not sure how much of the CSS which it needed. It`s pretty long and complicated so please ask and I will provide the code you ask for.
Link: http://www.hitra24.no/
The problem was located in my CSS where .nav was set to overflow: -webkit-paged-y;
By removing this it solved the problem on Safari on both iPhone and Mac.
I'm seeing a weird issue and have spent a good bit of time trying to track it down, both through SO/blogs and finding an active issue in Chrome's bug tracker.
Link: https://jsfiddle.net/Lftwqh8p/1/
Issue: This only occurs in Chrome. In JS, I have a commented out line to switch between using the mixins. Both have their own issues with the same root problem.
Problem image:
So what we see is the width of the scrollbar
::-webkit-scrollbar {
width: 25px;
height: 10px;
}
directly effects how off-div the first column is. If we view this in IE or Firefox, we see this works as expected (Takes full width, or the column header is in the correct position).
If we remove the CSS for will-change: transform or the position: sticky, this will resolve the problem.
So I have a suspicion that this is a browser issue, and specifically is an issue with how Chrome renders these on Stacking Context or Compositing Layer. These both occur when position sticky is used and when will-change is set to transform.
I can't find any info on an issue like this because our use-case seems to be a bit specific to us, but is necessary (performance).
Any ideas on what the issue could be?
Scrolling is disabled on this webpage, however, when using an iPad in landscape, this problem occurs. There is no gray space at the bottom until you try to scroll down (this is disabled) but all of the sudden the gray space appears. I've tried to find the answer everywhere with no success. The link to the page is www.papiasxm.com
body {
position: relative;
}
seems to be fixing the issue.
For responsive design, using padding/margin sometime causes the issue of overlapping the main design. For this type of problem, it is good practice to not to use fixed height or if you need to use it then fix it with margin/padding.
you can fix body position to relative. here, position: relative;
positioned relative to its normal position.
Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.
I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?
I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar:
position:fixed;
width:960px
z-index:10;
Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.
#floatingbar {
z-index: 9999 !important;
}