The problem occurs when we mix Flash objects and UI elements, like radio buttons, and we embed them in iframe. Problem reported on Chrome 21/Windows. Works correctly on Chrome 20.
Demo links:
on iFrame: http://jsbin.com/agaxur/1/edit
without iFrame: http://jsbin.com/agaxur/1/
Any ideas?
I also have the exact issue. But I don't have any ideas to solve it.
However, I used a jQuery plugin called prettyCheckboxes as a workaround, and used a transparent radio button image from Niceforms.
Related
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
I have a youtube video introduced by <iframe> tag (I tried by <object> also, but the results are the same). On the load page, I have a dialog modal also (that it works properly).
I don't understand why, only on IE11.0, this video is not "hidden" (meaning inactive, like all other elements of the site, until the window is closed).
Is it something special, particularly for IE, that I need to add in css? I tried z-index (only idea which I had), with negative values for this video, but it doesn't work. It is a bug of IE? I have no idea...
Thanks in advance.
PS. If it is necessary, I can add the css file also (but it's a little big).
PS.2. I repeat, for other browsers (Chrome, Firefox, Opera and Safari), this works properly (the video is inactive while the dialog modal is active (not closed).
Developing a plugin for Chrome, I've used data-tooltip for links which require a tooltip. Until 2-3 days ago, everything seemed to be working fine.
Today I've discovered that the tooltip for links inside a modal display behind the modal. Nothing has changed in my code. I even tested with older versions of my app ant it still displays the tooltips behind the modal.
My guess is that Chrome has changed the way it views tooltips. Any idea what I can do to fix it?
Example of tooltip usage:
<div class="choose-platform" data-tooltip="GoogleDrive">
...
</div>
Screenshot of the error I'm facing
On hover of Google Drive Icon, the tooltip appears behind modal
It seems like tooltip is appended in body. Try giving higher z-index than modal box
I am using Bootstrap glyphicons and FontAwesome icons and am experiencing a strange bug where they do not show unless hovered over, at which point they are permanently visible. When I reload the page they aren't visible again.
This only happens in Chrome. Safari and Firefox both show the icons normally.
I am running Chrome v33.0.1750 - this has never happened before.
I found some JavaScript code to re draw the page and works for me. I found this on SO somewhere so it's not my code.
$(document).ready(function()
{
var Offset = $('body').offset();
$('body').offset(Offset);
});
I just figured it out. Turns out there's a conflict with one the jQuery plugins, holder.js - the image placeholder plugin. Removed that and the icons show fine now on reload.
Strange, considering that in Bootstrap's documentation, they use holder.js to generate images for their 'Thumbnails' section.
UPDATE:
It seems there is a conflict between Chrome 33 and any version of holder.js above v1.9.
https://github.com/imsky/holder/issues/81?codekitCB=415695904.557899
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