I've been working on a website ( http://www.clicks1.co.uk/#Contact ). However I've come across a bug in which many of the 'click' interactions on the page don't work on some Iphones but do on others. I've found it to work perfectly on an Iphone 5, but not on an Iphone 5s.
Specifically in the contact area, the hyperlinked facebook, twitter, and google+ images do not open the links when tapped on an iphone 5s.
It was my thinking that perhaps there's some kind of element overlaying the hyperlinks blocking any attempt to press them. Still not sure why this would only be an issue specific to some iphones and not others.
The solution was to create an invisible absolute positioned div with a high z-index. This div was then positioned above the original hyperlink element and given a href link.
If like me you want to use this solution over dynamically sized images/text then I found giving width and height parameters % (eg width: 40%) values allowed them to resize with the elements they were above.
This usually happens when there are other 'invisible' elements on top of the hyperlinks.
Use the browser's developer tools to inspect the link and see which HTML element it selects. If it selects one other than the hyperlink, than chances are that element is superimposing.
Sometimes a 'clear:both;' on a mediaquery is all it takes to fix problems like this.
Related
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
I'm encountering a strange issue.
I have a facebook button at the bottom of a page. When clicked, the facebook "Comment/share" box pops up.
The behaviour is correct under FF and IE, but not in Chrome, where the box is cut by the bottom of the page. In other words, the page isn't resized as it is under FF and IE.
The page has a min-height and max-height, and the containers have an overflow:visible attribute as the facebook docs advises to avoid some display issues of the share iframe.
The curious thing is that the bug disappears by simply opening the developer tools, and checking/unchecking any CSS attributes of any parent element of the FB-button.
My guess is that the resize of the window isn't captured by Chrome when the button is clicked, but it is when using the developer tools.
I tried to explore other sources of the problem (max-height not working properly or a higher element having a overflow:hidden) but I found nothing conclusive.
Thank you for help.
You may have an issue if you're running a theme in Chrome. If you are, try resetting to the default theme:
options > personal stuff > themes > reset to default theme
Also, make sure you aren't zoomed out or in. Chrome gets a little funky with the zooming.
Assuming those aren't the issues, try putting the Share code in a div with a unique ID or class:
<div id="myFacebookContainer">Plugin HTML Here</div>
Your CSS would include something along the lines of this:
#myFacebookContainer span{
height:25px;
}
#myFacebookContainer iframe{
height:25px;
}
I hope one of those suggestions helps!
I am having issues with overlaying divs with transparency and being able to click on both layers in Chrome (but not IE).
In my search for answers I found the following example to illustrate:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
The source for that page is commented to explain about transparency.
If I view this page in IE I can highlight (ie interact) both the text in the box("Here is a div with...") AND the text at the top ("This DIV is overlayed on..."). However, when I open the same page in Chrome, I cannot select the text at the top.
This highlights the issue I am having in using iframes which contains links, but I also want the page containing the iframe to also allow links to be clicked. The transparanecy works in Chrome in as much as I can see both sets of links, but can only click those on the top layer (ie the iframe). The top iframe allows me to see what is behind but not interact with it.
I know about pointer-events:none however, that then stops the links on the iframe. I can basically get it working on the background html OR the overlying iframe but not both!
Hope this all makes sense and thanks in advance.
It seems that the solution specifically for chrome is using the css:
div#parent, div#parent div {pointer-events:none;}
meaning Div, and all children div as well should enable clicking through.
I found the solution here:
Click through transparency in Chrome
I'm having a problem with Internet Explorer on my website (My Website).
The problem is under "Account Summary", the avatar is using absolute positioning. It works fine under Chrome and FireFox, yet for some reason it doesn't in IE 9 (compatible mode fails as well).
The avatar positions correctly when the page is loading, but exactly when the page finishes loading, the avatar shoots off to the right.
Here are some things I've tried and it still fails.
Removed all CSS from head
removed header/footer code
resized avatar
resized display block width/height
some other minor tweaks
Thanks,
The reason is that you have some code that changes the image into a span in IE, so the style that you have specified for the "Last active" span also applies to the avatar.
Add classes to the span and the image so that you can use those in the CSS selectors, so that you don't use the element names in the selectors.