I have an iframe that contains a link to an anchor element, which is also within the iframe. On mobile Safari, the first touch is ignored; it requires two touches to jump to the link target.
Example: http://ridiculousfish.com/iframepain/outer.html and touch the Click Me!. This requires two touches to jump to the Link Target on mobile Safari.
Bizarrely, if I remove some text ("This Text Matters") above the link, the issue no longer reproduces. Fixed example: http://ridiculousfish.com/iframepain/outer2.html
How can I make the link work on the first touch?
Note there is no JavaScript, hover, or cross-page business involved.
Related
I've got an issue going on with my CCleaner internet web browser (which is built on Chrome). These silver-white borders appear over elements on web pages, and even the whole page itself, whenever I click on such an element. It only happens inside the CCleaner browser window, not in "regular" Chrome.
Here I would like to provide an example, taken from my edit account settings here on Stack Overflow dot com (a page you can look at that is exactly the same as mine except for my issue with my web browser).
OK so in that pic the border you see around the text entry box is what I get all the time. The box is not permanent; it slowly fades out and dissolves.
How do I prevent these silver borders from appearing in the first place?
I have a problem with a website I'm working on. Using the Safari browser, while the page is loading, the video control appear just for a second (like on the image) and then it disappears.
The main page of the website has a full-screen video but I set the controls=false in the attributes. And the main problem is that it always appears, also when there is no video in the page is loading. How can I hide it?
controls is a Boolean attribute so its very presence means that it is true, regardless of what you set it to.
Try ommitting it entirely.
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.
I've inherited a site with a problem that's driving me nuts in Firefox and IE.
There are 3 anchor tags on the site's home page. All of these anchor tags work when the visitor is on the home page, but only 2 of them work when used from other pages.
The site is http://sm.retriogroup.com
Clicking on "Menus," "Locations" or "Contact" in the header menu brings the page to the right anchor.
If you visit another page such as http://sm.retriogroup.com/gallery and then use the same links, only the "Menus" and "Contact" links work properly. The "Locations" link always goes to the bottom of the home page instead of to the anchor. (In Chrome, the page loads at the correct anchor point)
The HTML for the anchor links is the same, using an ID as the anchor name. I don't understand why this particular one isn't working, while the others do.
Frustratingly, if you use the http://sm.retriogroup.com/#location link from another page, it doesn't work. But then once you're on the home page again and click "Locations," then the anchor loads no problem!
Discovered the problem by systematically erasing content on the page one-by-one.
Problem turned out to be related to a slider on the page that was being generated through javascript. Setting a height on the slider's container solved the problem.
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