I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
Building an ionic app and I noticed that ion-header is always fixed to the top of the page, I cant seem to find a way within the frame work to enable it to scroll with the content so I have now totally removed it from all my pages and just added a header to the in the form of a which has the back button etc
What I am wondering is, if this is the standard way to achieve what I want or is there a better way ? is there any issues i may encounter by removing ion-header etc..
Well the first thing that I must say is that having the header fixed at the top of the page is a standard both on iOS and Android, so that's why Ionic does it - mobile app users expect your app to behave like that just like 99% of the rest of the mobile app do.
Is there any issues I may encounter by removing ion-header etc..
Since Ionic expect the header to be in a specific place within your pages, you may have issues related to:
Page transitions: Like you can see in this answer the iOS page transition won't work properly if the header is not placed where Ionic expects it to be.
"Overscrolling" on iOS: When you are at the top of the page and you still try to scroll a bit to the top on iOS, you'd expect the content of the page to scroll but the header to remain in the same position. If the header is not fixed at the top you'd see a section with a white color background at the top of the page when overscrolling.
iPhone X safe areas: Ionic uses some CSS rules to make sure the header has some extra padding at the top in devices like the iPhone X to handle the top notch that those devices have. If you place the header in a different way, you may need to fix that manually with your own CSS rules.
Status bar overlapping: Also related to the previous item, the header prevents the content to be shown behind the iOS status bar. If you don't have a header, you may need to add some extra padding to your content to avoid this.
If you really need to hide the header in your app, one way to avoid these issues would be to make the header to be hidden when the user scrolls. That way the header would still be where Ionic wants it to be, but it will go away as soon as the user scrolls (this is also a known pattern that some apps do). Please take a look at this amazing post to know how to do something like this:
I have a responsive site design, most of which works just fine.
On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)
If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.
Here is a temp link: http://moymadethis.com/oca/test.html
Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).
Thanks, hope someone can shed some light on a solution for this?
Steve
Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.
select { width: 6em; }
When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.
If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.
I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.
try using max-width on select element
eg #myselect {max-width:95%;}
On iPhone with iOS 15.4.1, I also needed to specify overflow-x:
#myselect {
width: 50%;
overflow-x: hidden;
}
Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.
Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.
When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.
Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?
I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.
Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader
Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/
The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.
Here is what worked for me:
I placed all content inside an ol tag.
<ol style = "padding:0;margin:0">
my content
</ol>
From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.
You can disable the reader button by hiding the content that triggers it.
And then displaying that content 1s after the page loads.
For instance, hide all your <p> elements if they are triggering the reader button.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.