As I scroll on iOS Safari only for my fixed position menu, it slowly scrolls with the page (but much slower pace?) until it disappears. It works in all other browsers/devices even the iOS simulator just fine...Any suggestions? My code is as stated here:
.mobile-nav {
background-color: #455660;
height: 58px;
position: fixed;
width: 100%;
top: 0;
z-index: 5;
}
Nothing fancy, just your ordinary fixed pos. navigation. Again works on Chrome for iOS, and safari iOS simulator, Safari for OS X, etc...just real iOS devices with safari seems to be the problem.
Related
We have fixed the button on bottom of page in RWD mobile using position: fixed. Working fine in Android device, but flickering in iOS device while scrolling. We tried the following to the element fixed. None of them worked. Any solution for this issue?
transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;
Try to remove the fixed element from the container that has -webkit-overflow-scrolling and put that somewhere else.
I have a web property and when viewing in an iphone, the fonts are all different even though they are set at 14px ....
font-size: 14px;
Here's a a screenshot from my iPhone 6 Plus:
Looking in chrome developer set for mobile, it is rendering fine but not on iPhone.
What is going on (link if answered before) and how do I fix this?
I recently put together a webpage for a client.
www.kinektd.ca.
Only when viewing on a mobile device the background banner images on the site get super zoomed in and pixelated.
Is there a mobile device media query I can add that ensures these images do not get zoomed in and pixelated on mobile devices?
Here is the css code that targets the background image;
.ts-home1-data-transferred{
background-attachment: fixed;
background-image: url(../images/background/main02_2-1920x1200.jpg) ;
background-repeat: repeat;
}
Can I target mobile devices and include certain coding that will solve the zoom issue?
Thanks in advance.
I'm having an issue with the safari browser on ipad.
As I'm not having one by myself it's a bit difficult to try around, but I'm working on it.
The problem:
I'm having a background image fixed + background-size: cover
On all the browser on the desktop it looks fine. But the safari mobile on ipad shows the pic kind of huge and so really pixely.
The container has: (the most important)
width:100%;
background:url("...") no-repeat center center fixed;
background-size:cover;
I don't know how to fix it, do you have any idea?
Here you see a pic of the ipad:
My site's left margin is not working on iPad (portrait mode). It's perfectly centered in landscape mode but when I turn it to portrait view my left margin seems set to zero. Can you help me with this one?
my website: www.inclouds.co.uk/test
I am using ipadpeek to view my site on ipad:
for my css code:
#container {
width: 990px;
margin: 0 auto;
position: absolute;
}
#header {
width: 990px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: block;
}
Try changing the width to 100%. Your forcing it to be wider than the iPad screen in portrait.
Also rather than use that testing site, turn on Developer mode in Safari, connect your device to your computer and open the Web Inspector from Safari's Developer menu.