I'm aware there had been a fairly recent update that removed the video controller from Chrome and that this feature has been added back in the latest versions. However, I'm having an issue with Chrome removing the video controls from videos that are in div blocks that use overflow: auto; to scroll the content. I'm unable to find any documentation of this issue and I'm wondering if there is a possible workaround for this.
Related
I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.
Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.
The blog post linked above says the following:
iFrames
What is it: Using iFrames in overflow:scroll elements to show things
like videos or maps What’s the symptom: If you have an iframe that is
outside of the viewport in an overflow: scroll element (especially
when using -webkit-overflow-scrolling: touch) then it will not render
as you scroll to itWhat’s the cure: no idea, please send me the
answer
Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.
This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?
Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...
I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
I got this bug that began to occur in Chrome 17 and stayed with 18, when rendering an ASP.NET site.
What's going on is one of the pages renders incorrectly, BUT if I click on the webpage, or even on the scrollbar or on an html element in the chrome dev tools, then the components from the website snap back to their correct positions. It is quite a complex website with lots of controls, and what happens visually is that some panels appear blank, some popups are shown, and some hidden controls are visible.
This isn't happening in any other browser or version, and never occurs the first time I enter the page. It only occurs after a post-back has happened from within the same page.
I've noticed some CSS rules are set on the 'misbehaved' components, but are not being visually applied. For example, I'm using chrome's console to inspect a custom dropdown menu which should be hidden. When I retrieve the item, it has both the display:none and visibility:hidden properties, e.g.
<ul id="xx" style="position: absolute; left: 90px; top: 845px; display: none; visibility: hidden;> ... </ul>
However, when retrieving its display css property, it's 'block'.
$('#xx').css('display')
-block
Once I perform an action inside the webpage, the components snap to their correct layout, and the 'display' property is suddenly the correct 'none'.
I'm really out of ideas with this one. There doesn't seem to be any code executed between the incorrect and correct rendering of the page. My guess is maybe there are CSS conflicts between the asp code and the .css files, and maybe one is overwriting the other before it finished rendering.
Any help is greatly appreciated. Thanks.
We've experienced this problem as well, in different versions of chrome.
This far. the only solution we've found is to simplify the html.
Looks lika a Chrome rendering bug to me.
I also don't think ASP got anything to do with it considering it doesn't run on the client side.