I'm working on a website where the client would like the menu to be static at the top of the page, and when the menu is opened it opens a static menu which can be scrolled in case there are more menus than on the screen.
I have this working correctly expect apparently on iphone 6 (not sure if other iphones are affected) when a user first scrolls the menu goes the opposite direction of the scroll. After first touch, it works fine.
http://readysalteddev.co.uk/hotrod/
CSS
.menu-primary-menu-container {
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
margin: $header-scrolled-height 0 auto;
z-index: 99999;
display: none;
-webkit-overflow-scrolling: touch;
position: fixed;
overflow-y: auto;
height: auto;
max-height: 100%;
}
ul {
padding: 0;
list-style: none;
margin: 0;
-webkit-overflow-scrolling: touch;
float: left;
display: block;
width: 100%;
height: 700px;
}
I read somewhere while researching that -webkit-overflow-scrolling: touch; might have helped, but apparently it hasn't.
I'm working blind as I only have an ipad and android for testing, and it seemingly works perfect on both of these, including every web browser (not IE of course)
UPDATE
Just saw on another question that maybe adding
-webkit-transform: translateZ(0);
-moz-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
Might help. Uploaded it and waiting on tester to confirm what happens.
UPDATE AGAIN
Didn't help apparently.
i see some problems when the menu is opened (i can still scroll the page)
maybe you disable scroll all together when the menu is opened
you can do this adding overflow: hidden & height: 100%; on HTML
what OS does that Iphone have? older version have problems with position: fixed
EDIT after inspecting your code
there are a lot of containers floated in mobile breakpoint . maybe you remove those floats
html & body receive overflow: hidden & height: 100%;
#site-navigation .menu-primary-menu-container gets fixed height & overflow: auto
the fixed height should be 100% so it takes the entire screen (or 450px if u dont care that much) . but adding 100% wont do the trick . because that container is inside a bunch of other containers (some of them) with fixed height and overflow hidden (not auto) . so if u want to achieve 100% on the menu . then #header is the place to start . make its 100% height (only on menu opened state) and go down the line until you reach the menu .. or get the entire menu of #header
hope it helps . gl
I am very new to cordova apps and developing for phones so apologies if this is a simple fix. I have a sign in page which consists of a box for email and a box for password and then the sign in button. Below all of this right at the very bottom of the screen is a further button which links to a buy something page. This all works fine except when i view the app on an iphone 4s. In this case the link to the buy something page floats up and places itself over the password field. I have tried changing the css positioning to relative but this then messes the app up in iphone 5 and 6. I then tried to implement a z count which did sort of work but also affected other functionality. The relative bit of the css is below.
&.start-button {
bottom: 0px;
position: absolute;
width: 100%;
background-color: transparent;
left: 0px;
border-top: 1px solid #ddd;
This was resolved by amending the meta tag to include the following:
height= device-height
Jssor slider:
Is it possible to move the social links div above the image, while keeping it responsive with the image. The demos have the social bar on top of the image. I have done this & it appears to work correctly in all current browsers, with the exception of resizing issue only in IE. Can it be done?
I noticed that it doesn't display in ie 8;
Please set z-index 10 for share button navigator as follows,
<div u="any" style="position: absolute; display: block; top: 6px; right: 16px; width: 280px; height: 40px; z-index: 10;">
I am trying to finish my first website and thought it was pretty much finished but am having an issue with viewing some page layouts on an iPhone 5 (S and C). On my 4 it's fine and on an iPad I tested it on. Also fine on Android.
The issue is the fixed navbar (bootstrap) is bouncing around on the galley pages (it's a photography site) which have a horizontal scrolling div but it's ok on standard page layouts. I have disabled a mouse wheel plugin it's running to check if it's that and it has no effect on the iPhone 5 issue. Normal layout pages are fine.
the url is: http://www.pjrundle.co.uk
The problem occurs on any of the photography pages.
Sorry if this is a really obvious newbie question. Here is the css for the div containing the side scrolling gallery. I tried removing absolute positioning and no effect.
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
}
Any advice greatly appreciated.
Thanks.
Thanks mijopabe, I fixed it in the end by adding:
.scroll {
white-space: nowrap;
background-color: white;
padding-top: 73px;
position: absolute;
left: 0px;
width: 100%;
overflow: auto;
}
Not really sure why it worked without this on other browsers to be honest but fixed anyway.
Cheers.
I've found what seems to be a bug in WebKit for iOS 7, but only on iPad 3 and 4, which leeds me to believe it's somehow hardware-related.
The bug: If I add the spread value (the fourth value) to CSS box shadows the whole shadow disappears. I've put up an exampel here.
Can anyone else confirm this error on iPad 3 and 4 with iOS 7?
Still an issue in IOS 7.0.4.
Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.
border-radius: 1px;
We've found a good rule of thumb when dealing with safari and/or iPad issues (or both). Put the following rule on the element or class to force hardware rendering.
transform: translate3d(0,0,0);
This solved my problem getting a shadow (used as a border with the spread value) to render on an iPad the same as other devices.
It is even more strange i was looking into the exact same problem.
If you use inset you can define your spread and then it is working fine!
an other fine fact is that your dropshadow will be gone as you turn your ipad into landscape mode.
This is a quite annoying bug!
I had a similar issue on iPad mini w/ iOs 7.0.3
the problem appeared both in safari and in chrome
input field with inset box shadow didn't appear at all regardless the zoom
div drop shadow appeared, but when zoomed in changed to a line and further zoom in hide the line as well.
I found on another thread this solution:
"Try adding -webkit-appearance: none;, because iOS tends to mess up forms."
and it solved the problems !
Something similar here. Applied box-shadow to image elements. It shows fine at zoom=1. But if you zoom in, it disappears on iPad 3 with iOS 7.
CSS Code used:
#photostrip > img {
-webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}
Same issue with iPad Air / iOS 7 :(
Setting -webkit-appearance didn't help, neither did border-radius.
I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):
.box_shadowed
{
box-shadow: 2px 2px 4px 2px #ccc;
-webkit-box-shadow: 2px 2px 4px #ccc;
}
I had the same issue on iPad 4 with iOS7. When I set CSS box shadow for an element it appears as intended on iPad portrait view. But when I rotate the iPad to landscape view the box shadow gets disappear.
I tried StrandedPirate's solution - adding 1px border radius to the element and it worked! This solution might not be applicable for all cases, but for my case it is adoptable.
I had the same problem and added border-radius:1px to fix it.
I was using:
border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);
and the shadow wasn't appearing on iPad(iOS 11): Safari and Chrome.
I tried all the other answers but with no luck.
The solution for me was to reduce the spread from 20000px to 922px. This was the max value that I could use so the shadow would appear.
One single rule didn't helped in my case.
At the end I fixed adding ALL these rules:
-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;
In particular setting also the height.