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
Related
I'm working in a web page in react and it seeems like the scroll in "y" is causing that the header of my table dissapears, I'm testing on iphone 6 and this is the part of the code where I'm using the scroll, inside a table. When I scroll the header is hidden, someone knows how to solve it? In android, Windows 10 and others devices works well.
height: 100%;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
When I change to this the header is scrolleable too, but disappears the first element of the table
position: relative;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: 100%;
I attach a sandbox: https://codesandbox.io/s/tableexample-g84sn?file=/src/Components/Table/styled/scrollableY.js
I'm having a weird rendering issue on iOS devices
this is the website -
http://dev.makeyourownbottle.com
Relevant CSS:
.bottle-images {
display: inline-flex;
}
.bottle-images img {
width: auto;
}
.bottle img {
width: 100%;
padding: 0;
position: relative;
}
.bottle p {
position: absolute;
font-family: 'Caveat', cursive;
font-size: 30px;
top: 19%;
color: #006699;
font-weight: 700;
padding-left: 2px;
margin-top: 2.4em;
}
.bottle {
margin: 0 2px;
}
Relevant HTML:
<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>
I'm having a problem where the numbers that rendered in front of the bottle images are not consistently showing on top of the bottles
I've tested various phone models through browser stack and it's definitely an iOS issue , it's not happening on android, it's not happening on windows or MacOS
Note that the website was tested in apple stores using different devices mid-late July 2018 - where we didn't have this issue at all - it just suddenly propped up now
On the iPhone X - it sometimes fixes itself after the CSS loads
(after about 1-2 seconds) , sometimes it doesn't. - as shown in the image, I just loaded the site and it rendered correctly, other times it does not.
As shown in the image for iPhone 8, the numbers are out of place on initial load, on iOS Chrome, moving up and down the screen immediately corrects it, on Safari it does not - this is consistent for iOS 7,8,8 Plus that I have tested - iPhone X sometimes displays correctly on initial load.
Opening Dev tools on browser stack immediately fixes it - so I don't know what to check ( as soon as tools window opens, it aligns properly )
Sometimes clicking refresh on the browser fixes it for subsequent re-loads, other times it keeps messing the numbers on each reload
I have moved the CSS around, moved the classes to the top of the CSS to see if that has any impact, it didn't change anything
I cannot determine the cause for it because as soon as I open developer tools , it just fixes itself - seems like some internal rendering bug in iOS ?
I'm unable to determine the cause / reason for this - anyone has any suggestions ?
I think this might be caused because of the inline-flex option.
Try this:
.bottle-images {
/* display: -ms-inline-flexbox; */
/* display: inline-flex; */
width: 84px;
margin: auto;
}
.bottle-images:after {
content: ' ';
display: block;
clear: both;
}
.bottle {
margin: 0 2px;
float: left;
}
Just update your css like this and let me know if this worked. Hope this helps.
My issue only happens on iOs (on both Safari and Opera), works fine in Chrome, Firefox and even Opera on Windows and Android.
I have the following situation:
<div class="flex-box-parent">
<div class="group01">
<div class="fixed-element">
This element has a position: fixed and z-index: 100
</div>
</div>
<div class="group02">
On iOS, fixed-element does not cover this part
</div>
</div>
I need the fixed element to appear above everything else on my website, as it is a modal with a full-screen backdrop.
Unfortunately, all the content of fixed-element that is bigger than group01is not displayed.
Neither group01 or group02 have a z-index specified. It works perfectly fine on Windows/Android, but on iOS, group02 is always above.
CSS
.flex-box-parent{
position: relative;
display: flex;
flex-direction: column;
}
.fixed-element{
z-index: 100;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.group01{
position: relative;
flex: 1;
overflow: auto;
}
.group02{
display: flex;
flex-direction: column;
position: relative;
}
MORE INFO #1
As a test, I removed every single reference to z-index in my css, except for the fixed-element. Still not working on iOs (working on everything else)
MORE INFO #2
It seems the problem is that fixed-element cannot go outside the border of its parent on iOS.
It seemed to me that group02 was above fixed-element, but in fact, fixed-element simply cannot go full screen if it means getting bigger than group01. I am still looking for a solution to this issue.
In html you shared div tag is not closed for class .fixed-element. Please fix that and check
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.