Excuse me that I don't know much JavaScript since I'm a designer.
I have two animations in relative mode which, when you initially view them are displayed at their end keyframe even though they're supposed to be at their start keyframe (at that point in the scrolling). If you resize the browser window in any way, they assume their correct behavior and jump back to the start keyframe where they're supposed to be. However, if you refresh the page again they always load at the end keyframe, which makes me think that they're getting the wrong viewport size or scrolling position.
Here is the site: http://vostrocity.dreamhosters.com/#skills
For example, the following displays only its end keyframe unless I resize the window:
<div id="venn-prototyping" class="venn"
data-100-top-top="transform[swing]:translate(0px,0px);"
data--100-top-bottom="transform[swing]:translate(-290px,600px);">
<h2>Prototyping</h2>
</div>
I have one animation in absolute mode which works fine without resizing the browser window.
Make sure you initialize skrollr when all images, which affect layout, are loaded. For example inside of the examples element, there are images which affect the height of the parent and thus the position of your venn diagrams relative to the viewport (as soon as the images are loaded, your diagram moves down). Your diagram is actually animating, but before it enters the viewport, because of this offset.
Related
This is one of the weirdest bugs I've ever encountered. Some chance it's an extension or a browser bug or something but it only shows up on the app I'm building when I'm refreshing it in development mode, so stackoverflow seems like the right place to start asking.
Basically under certain as-yet-unknown circumstances, every time I reload the page I'm working on, the <body> element slides off the page to the left about 10px. And then when I refresh again it often slides even further. If I open the page in a new tab, it's fine.
In this screenshot below, I've highlighted the <body> element in the element inspector.
Clues:
it only happens sometimes, but once it happens almost every refresh increases the offset
certain absolutely-positioned elements like the navbar continue to fill the whole width of the html element, but others don't
the body element doesn't have any styles or classes it shouldn't have
changing the body element position to absolute doesn't affect it
the html element and the body element are still the same width
I'm using a 4k screen on linux (?!)
My best guess is something like... it's double-loading some sort of AngularJS directive, although I neither know why it would do that nor why that would cause this bizarre problem. At any rate, likely I'll be the one to solve this, some months or years from now, but if you've got any ideas, I'm curious!
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
I am experiencing slowness with an animation in my website.
After some investigation I found out (via the DevTools timeline tab) that the problem is that the entire page is being re-painted instead of just the animated div.
I checked the "Show composited layer borders" option, and found out that sometimes the animated div is in another render layer.
But I can't find a consistent behavior:
When the div is not in another layer - the animation is slow.
When the div is in another layer, sometimes the animation is fast and sometimes it is slow, depending on the presence of other elements in the page (a div with position:fixed, a marquee, etc). These other elements appear to be totally unrelated to the animated div in the DOM tree but obviously have an effect on the rendering of the page during the animation.
I found a few articles (1, 2, 3, 4, 5) that suggest possible ways to "force" Chrome to render an element in another render layer but most of them are old (things might have changed).
Also, they generally don't address how elements can affect each other with regard to the render layers.
How does Chrome decide which element to put in which layer?
How can I find out what was decided in my case? (i.e. debug the render layers)
How can different elements affect each other with regard to the render layer?
How can an animation of an element that is in another layer, cause a re-paint of the whole page? (at some cases this happens)
How can I ensure a fast render of my animation? i.e - force the element into another layer and make sure the animation doesn't cause a re-paint of the entire page.
And lastly - how can I stay on top of changes to the browser's rendering algorithm so that these problems don't return in the future?
OK so I finally found a solution to my problem.
This SO answer explains how to enable the "Layers panel" in chrome DevTools. That panel allows you to see in real time (even during animations) which elements are in which layers on the page.
Also, each layer has properties that tell you why chrome decided to make a layer out of it.
Using this tool I was able to determine that one of my elements which is an overlay of the whole page (to mask the page when there's a modal div) sometimes gets its own layer and sometimes not.
The reason it got a layer only when some other elements like marquee were present on the page was that chrome detected that "the element may overlap other composited elements".
When these "other composited elements" are not there, this overlay element does not get it's own layer. And when I open the modal there's also an animation on the opacity of the overlay div. And since it was not in a separate layer - it caused the entire page to re-paint itself in each frame (this is sometimes referred to as a "paint storm").
I solved the problem by making sure the overlay div will always get its own layer, by adding -webkit-backface-visibility: hidden to the style of this div.
I scale an image down using css, but then its edges are jagged. However, if I quickly switch to another tab in chrome and then come back, it is drawn correctly. I assume that this is because of somethings that happens during redraw. Is there any way to force a redraw using jquery? I have tried adding classes, elements, and changing other attributes.
Ok, thanks to the bump, I will add my solution here. What is really happening is we are trying to force a repaint of the entire window. The following does the trick:
function reDraw(){
//hack to redraw the elements on the page to avoid choppy look of resized items
//prevent reDraw from firing too early
setTimeout(function(){$('body').hide().show(0)},66);
}
The show hide combination will force a repaint of the area affected. note that the 0 on show is needed. The 66ms delay is used because forcing a repaint immediately after applying styles (in this case, a css resize) will bypass the recalculate styles function in the browser. 66ms is aprox. 15fps so it should still appear to happen instantaneously on any screen running at 30fps (it will take two screen refreshes if all goes well). A small blip from pixelated to non-pixelated is visible on a 60fps display, but how many people pay that close attention anyway?
Anyway, that is our solution. For us, it was used on a website that is built very similar to a video game as far as animation loop and other things. Because the screen is being refreshed a lot already, we found we only needed to call the reDraw function after the resizing of a PNG, but your requirements may be different.
Note that this function can be very resource intensive, and I have observed that many browsers need to collect garbage after this so you may need to evaluate how necessary the realtime aspect is. Use sparingly.
Enjoy!
~techdude
I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.