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
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 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.
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'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!
In any modern browser, when you visit an image url (eg, http://i.imgur.com/xrM9q.jpg), it automatically resizes that image and gives you the option to "zoom in" with a little magnifying glass. This is not always the case with an iframe:
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
If you link an iframe to an image, Firefox will give this nice behavior: it starts out behaving like max-width: 100%; max-height: 100%, then you can click on it to make it big.
However, in Chrome, the image is just full-size. Try opening this example in Chrome and Firefox.
How do I get Chrome to handle images "smartly"? That is to say, have the default behavior show a magnifying glass cursor and provide auto-resizing?
(To clarify: I want this to work in a Chrome extension. The only solution I've come up with so far is to put a content script on all pages and manually change styling on images on the page. That solution sucks, so I'm hoping for a method that is less hacky and doesn't effect every page the user visits)
Try making the iframe refer to another html file and in that html file put the img tag with the width and height constraint. I think it will work on most browsers this way.