I've encountered an issue with Firefox specifically (I'm using version 61.0.1 (64-bit)) where upon exiting the fullscreen of a video element on a page which is scrolled down it will caused the scrollTop of the body to return to an incorrect position.
Example code to test would be like (where ... are multiple elements causing the page to be long):
<p>1</p>
<p>2</p>
<p>3</p>
...
<p>7</p>
<p>8</p>
<p>9</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>
<p>10</p>
<p>11</p>
<p>12</p>
...
<p>19</p>
<p>20</p>
<p>21</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>
Example fiddle: https://jsfiddle.net/webbm/p8ws3yc9/
In my example I've tried to keep the HTML to some very basic elements so as not to introduce CSS related issues.
On the example above:
Upon exiting the first video's fullscreen, the scrollTop of the body is in the correct place.
Upon exiting the second video's fullscreen, the scrollTop of the body is moved upwards.
This behaviour still occurs even if there is only the second video element, so I don't believe it's related to having more than one video element present.
Is this a known issue with a work-around?
I've taken this to Mozilla as a bug under https://bugzilla.mozilla.org/show_bug.cgi?id=1479262 and they are investigating.
Related
I am trying to set up a simple blog using Metalsmith and the fullPage.js library.
At the moment I have a problem where the height of the section divs upon intial loading are roughly 2 times the correct size.
Ie. when it initially loads the height in the console reads 1563px.
The odd thing is that once I resize my browser window in any way ie. make it larger or smaller, the div(class='section') height will then resize to its correct height in the console and in the browser, and everything is laid out correctly again (with regular sized divs as opposed to the super tall ones that were there previously.
This initial height inconsistency is causing many issues with alignment in my layout, such as the prev/next arrows as well as the div content.
here is a link to my public git repo for this project.
If you want to run this locally you can pull it down, run npm install, then run nf start. You will then be able to access it at localhost/3000.
If anyone has any suggestions that would be much appreciated.
Thanks.
It is not ideal to just public your source. A link reproducing the error would be much better.
In any case, I believe yours is a case of missing the compulsory DOCTYPE declaration at the very start of the page.
Take a look at any examples of fullpage.js. They all have it.
Add this in the first line of your resulting HTML files:
<!DOCTYPE html>
I've been working on a Skrollr site but it appears to be getting excessively jerky. I've had dev tools open and have found a few really really slow frames, but I don't have the knowledge to track down exactly what is going wrong.
My observations are:
it is slower scrolling down than up
intermittently it is absolutely fine
So far I have tried a few things
Given the first segment a translateZ value to try and separate out the paint (I have no idea if this is correct – I'm really at the limit of my knowledge!)
Had a go getting rid of the relative animations (data-top-bottom etc) which could well be slowing things down, but after changing everything back to static numbers (data-1000 etc) its still almost identical
Can anyone shed any light on this? The URL is http://fieldviewfestival.co.uk/500 ... power up!
I think I've fixed it!
The webfonts weren't fully loaded when skrollr kicked in. After initializing it I added a
$(window).load(function(){
Where I refreshed skrollr I then added the following:
s.refresh();
I think the main problem was that the height of the page wasn't calculated by the time skrollr kicked in.
Also I had a strange scrollbar left over (so a scrollbar on the body AND html), which skrollr hadn't removed so I also added above that function
$(window).trigger('resize');
The final initialize looks like this:
var s = skrollr.init();
$(window).load(function(){
// console.log("Loaded");
$(window).trigger('resize');
s.refresh();
});
NB Silly miskate I made as well, don't use the function $(document).load(
I am working on animating a line graph using d3.js, and have been closely following this example. The code I have written works just like the example...but the bug I am trying to fix is one that is also unfixed in this example. (So going forward, just follow that link to see the bug for yourself)
In Chrome and IE10, the chart works just as it is supposed to. However, in Firefox, the line does not just draw itself from left to right. Instead, the page loads with the line already displayed, then the line erases itself from left to right, and then finally draws itself (again) from left to right like it should have done in the first place.
Also notice that the line drawing is twice as fast on firefox as the other browsers - this means that the issue is with the transition itself: the transition of the stroke-dashoffset property is handled differently by firefox and the other browsers. Specifically, if we remove the transition from the equation, the main difference becomes evident: With stroke-dashoffset set to totalLength, Firefox displays the entire path, as opposed to none of it, like the other browsers do.
So my question is: is this a bug, or is this bad form on my (and duopixel's) part? If the former is the case, does anybody know a workaround or a fix? If the latter, I would be very grateful if you could show me the correct way to do this!
I am using a video background plugin on this site http://kimcolemanprojects.com/index.html
Its works great on all browsers, only on chrome the video doesn't show until the user clicks on the screen, which is just a white screen.
Looks like its bound to a click event but I can not work out where. I can see no events bound to this page.
Thanks for your help.
Angela
This is a strange one indeed. It only happens for me when I open your site in a background tab. There are definitely no click handlers. (See "Event Listener Breakpoints" in dev tools.) And the video element does exist and is loaded, even though it's not displaying. So I suspect it's either a bug in Chrome or a quirk in how it handles certain slow-loading pages.
One thing that seems to make it show up is to tweak the CSS in the developer tools. So try adding this to your page at the end of the body element:
<script>
$(document).ready(function() {
setTimeout(function() {
document.getElementsByTagName('video')[0].style.display = '';
}, 500);
});
</script>
That works for me when I run it in the console, so hopefully it will work in script.
Also, there are a few easy things you can do to make the page load much faster and mitigate this particular problem, even if you can't make it go away completely.
Set a dark background color. That way, when the video takes some time to load, people will be able to see the white text immediately.
Make the video MUCH smaller. It's about 21MB, which is way too big for a background. It's encoded at around 3400kb per second, which is more than you need even for HD video on the web. Try it at 1000kb or even less. Maybe 500kb. And don't include an audio track in the video file.
Save the poster image as a jpg instead of png. It's 140kb. You can get it much smaller.
Put all your scripts (except for the mobile redirect) at the bottom of the body tag. This way you can at least get the text and background color displaying without having to load your scripts.
I'm building a new site for myself as freelancer. I'm planning to use the cycle plugin in the header but I'm experiencing a small problem.
I wrote HTML and CSS for de items that need to be cycled. Each div.feature inside div#featured should be cycled. A div.feature exist of an image and a div.info. They are both floated left, so they would appear next to eachother.
After writing the HTML and CSS I wrote the Jquery and when I test the page I see the first div.feature perfectly displayed, but after the first cycle all the floats seem to go wrong.
You can check it here: http://webstudions.be/projects/layout6/
Also chrome and safari seem the make another mistake as firefox, ie9 and opera.
Does anybody has an idea of how I should fix this or how I could get this to work??
In your CSS Try adding the following line to your elements style:
clear: both;
This generally fixes my float problems.