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!
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 use chrome all the time when developing my sites, although recently when inspecting elements randomly the style section of the editor will disappear and just show me the padding border and margin section and not the actual style of elements anymore. I've attached a picture of what happens. Does anyone know how to fix this?
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
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.
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.