Been using Animate.css to set up some whole-page animations on my site, however, I've found that mobile browsers seem to fail to recalculate the page size after the animation is over, often leaving a massive whitespace where the element began its animation onto the screen.
Basically, I have Animate.css animating entire page sized divs to slide in from the side and from the bottom, while side divs appear to not cause the bug as much, slideUp appears to leave the space at the bottom a lot. All divs are set to display: none after the animations finish.
It may be related to having overflow-y: visible; on my body.
I'm really seeing the issues on an iPad I'm testing on, Chrome eventually detects the new page size and removes the whitespace(after some delay), and Safari appears to just never figure it out.
Any ideas of hacks that may force mobile browsers to recalculate page size, or a more specific fix?
I was having the same issue but I was only animating in from the sides. Adding overflow-x: hidden; to the main div fixed this for me, so you may want to think about not using overflow-y: visible; somehow. It seems to be a bug with mobile browsers.
Related
So I am getting this strange horizontal line on top of my page on iOS Safari, and the strangest thing is that it appears only sometimes. If I scroll down the page it can disappear, and then reappear at random times. The changes only take place during scroll. I've tried a number of things to fix, but nothing seems to work. (position changes, border changes, body changes, etc.) The one thing that worked is making the menu sticky (and not fixed as it currently is) and then top: -1px, but that is not the functionality that I want for it. There are other hacky ways of doing it, like placing a 1px sticky hr on top of it, but I imagine there is something more elegant that can be done.
The issue does not appear on any other browser that I've tested.
Does anyone have any ideas? You can also check the website on huk-withbuilderio-git-topbarissue-hearology.vercel.app
The menu is built with react-boostrap.
Thank you.
I'm trying to add a CSS slant to <section> elements on my page, which also serve as backgrounds for a "parallax" scrolling effect.
I'm encountering an interesting problem. The slant works on the first <section>, but on the second (or any after that), the background image is moved down, or the flow of the div gets messed up. I'm not sure why this is happening.
I've made a jsfiddle of the problem. Any ideas?
If you open the fiddle in Safari, that's the behavior I'm expecting.
Update: It actually has nothing to do with the parallax scrolling. It's just the combination of background-attachment: fixed and slant.
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
This is the strangest bug I've ever encountered with chrome, unfortunately I cannot show you example images because of legal restrictions but I'll try to explain it as good as possible.
So I'm building this website which has an infinite scroll through viewport-sized sections. In the first section I have a form and an html5 video with position fixed in the background and then simple background images for the followup sections, odd numbered sections with background-attachment: fixed; which gives somewhat of a parallax effect.
Now the very odd thing is: as soon as I have focused one of the form inputs in the first section, all the sections with background-attachment: fixed; lose their background image... it's still in the CSS rule but doesn't get rendered (just white).
I tried several solutions for similar issues like this SO thread or this post. Now the funniest thing with the second one is if I add -webkit-transform or -scale to the sections with fixed bg images, the problem occurs right away without any focusing... I really cannot figure this out.
I hope someone can help me with this issue because it's pretty important to have that parallax like behavior.
Here's a jsfiddle showing the problem anyway, not exactly like on my page but you can see the bug, there the video is shown instead of the image, but on my page I set the video to position absolute after scroll has reached the 2nd section, so it's just white...
I too have encountered this problem.
The thing is that background-position will make content fixed at that position based on the browser window.
For parallax effect, try with some plugins
Background:
I am trying to transition smoothly between various presentations of my website using media-queries and CSS3 transitions. So far everything appears to be hunky dory, however, I've hit a snag while transitioning between a presentation that contains a vertical scroll-bar and one that doesn't. I think it's pretty common to change website widths with media-queries, so I was surprised when nothing came up on Stack about this.
The problem
Webkit browsers appear to enter an infinite loop / flicker when the transition results in a change to the presence or absence of the vertical scroll-bar. Here is a demo of the behavior.. to trigger it, just re-size the window slowly around the 700px wide mark in Chrome or Safari PC.
Question / what I've tried
I'm wondering what the workaround here is for Webkit? Firefox has no problem with it. I've tried removing the easing and transitioning faster (not preferred). I realize that I can simply remove the vertical transitions and simply transition the width, however, it is important to my design to transition both height and width.
I think the easiest solution would be to force the scroll bar to always be present. The simplest way to do that is by using this little snippet:
html {
overflow-y: scroll;
}
Here is your example with the above snippet added: http://jsfiddle.net/joshnh/8XW4v/show
I'm not sure if it is a webkit bug, because if you think about it, it is expected behaviour (it's just weird, and Firefox have done a smart thing in making sure it doesn't happen). Basically, when the media query kicks in, the element shrinks, and the parent no longer needs a scroll bar. The problem with this is as soon as the scroll bar disappears, the media query is no longer relevant due to the extra few pixels that are now available. So the object grows again, the parent brings back the scroll bar, kicking in the media query again, and so on...