I use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.
It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.
My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?
EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.
I finnaly found a solution.
The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.
html.ios {
overflow-x: hidden;
-webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
height: initial !important;
}
Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.
Like this, everything works perfectly!
Related
I am using Twitter's Bootstrap 3 modal, and it looks great, except on google chrome (perhaps other broswers too) on OSX, the page underneath jumps left a little bit - probably due to a scrollbar taking some space on the right.
Is there any way to prevent the page jumping when using modal windows on OSX Chrome?
I literally just fixed this problem on my project.
Put this line of code in your css:
body.modal-open {
margin: 0 !important;
}
If the above fix doesn't work for any future readers (as it didn't for me), here's a whole thread detailing potential fixes. Looks like it will be addressed permanently in the next Bootstrap release.
From time to time, my app will stop allowing scrolling of the entire page length. It will work perfectly, for some time, then suddenly the page will stop scrolling and you can only view/use the section currently in the view-able area.
It is intermittent enough, that it is hard to track down, and diagnose.
I have had reports of this issue on both Android and iPhone/iPad products.
Has anyone else run into a similar issue? Where you able to find out the problem?
I am using PhoneGap/Cordova 2.2.0 with custom JavaScript.
Thank you.
-- Eric
I've had this problem before when setting my body/html to 100% height in the css. The following is how I fixed it.
html, body{
height:100%;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow:scroll;
}
This is a wordpress issue, but I'm simply trying to fix the CSS and I'm not sure where to go. I'm using duotive-5 as my theme, I don't think this started happening til today, so I think it's something I changed, or it happened from updating to wordpress 3.6.
If you view our site on firefox, half of the slideshow is cut off until the browser is resized. You can see this at http://www.dominicandestination.com, and you can see it happen in the latest version of Firefox.
I'm not sure why the browser renders the slideshow weird until the browser is resized. It's hard to examine the CSS because it doesn't do it with chrome, and with firefox, after starting the inspector, the browser resizes a bit and the slideshow is displayed normally. Any thoughts as to why this is happening?
Try this:
Add height:100% to your .dt-fullwidth-wrapper
Add width:100%; and height:auto; to your .dt-fullwidth-wrapper .images-li.center a:link imgr
I've created a website.
On all browsers, except for IE7 & IE10 compatibility it is rendering just fine.
On these specific browsers, there is weird whitespace below the page and finally the picture sliders.
I've tried targeting these browsers specifically using css hacks, however; all of these were unsuccessful.
Can this fix your problem?
CSS:
body {
background-color: #28A31E;
}
EDIT:
I'm not sure what wrong behavior do you mean. In G chrome, I see large white space below page. In IE10 I don't see sliders at all and page is very long, but it seems that is ok because of right panel...
In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.