I'm trying to create a simple mobile nav menu. It looks fine on desktop Chrome, but I have noticed a couple of issues on my iPhone 6 Plus:
Safari: When tapping the hamburger to open the menu, the cross is moving when it should be in the same place as the hamburger.
Chrome: Above issue isn't present, however I have noticed an intermittent issue where the hamburger/cross get mixed up and show at the wrong time (eg: cross showing when menu closed).
I presume I've done something fundamentally wrong here - can anyone please help? :)
Codepen: https://codepen.io/sad_muso/pen/pbkLNW
I presume it may be related to this CSS that is applied when menu is open:
ul.topnav.responsive li a {
position: relative;
display: block;
text-align: center;
margin-top: 10px;
padding: 10px 5px;
}
Thanks
Related
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.
I found a number of issues with the POSITION:FIXED property on iOS Mobile. But it didnt resolved my issue. In desktops and in Android devices, works perfectly. Even in MacBook Air also.
ISSUE:
I have a position:fixed header, and a position:relative content (using padding-top:height-of-header for alignment). When i scroll fast, it starts scroll and then suddenly, it jumps back to the top of the page. But this issue is not showing when we scroll slowly.
This is the code for header
.site-header {
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
}
this is the code for main-content
.main-content {
padding-top: 80px;
position:relative;
}
Tried with -webkit-overflow-scrolling: touch; , transform: translate3d(0,0,0);.
Its an e-commerce website, developed in SHOPIFY.
the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.
Hello guys is really strange what happened to me today ...
I'm working on a code to create submenus, and I used the property
display: -webkit-flex;
display: flex;
align-items: center;
in this way the voices of the various sections (tags li) are centered vertically.
I have used these properties many times before for other codes and they have always worked correctly. As always, I check the code on my mac, on the iPhone 5, on firefox and chrome.
But as soon as I see the file via my iphone 5 (version 8.3) I was shocked .... the properties were not working. I have displayed the old files and even with them the same problem occurred.
The amazing thing is that the mc works wonderfully well with the iPhone 5 to my brother (updated to version 9.x):
I do not understand .... but how is that possible?
It 'a bug? or my iphone is broken?
There is a flexbox bug in Safari:
The <button> and <fieldset> elements can't be flex containers in Safari.
Solution: use a different wrapping element, e.g. an <a> tag.
If you can't or don't want to change the element, you can fix it using box-orient:
display: -webkit-box;
-webkit-box-orient: horizontal;
For me to get vertical and horizontal central alignment across Safari and Chrome on iOS and desktop I had to use:
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
Should I Prefix recommends that flexbox still be vendor-prefixed. Anecdotally, I would say that it really only needs to be prefixed on Safari.
This means not only vendor prefixing your display settings, but all Flex box properties:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
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 have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!