I have a basic slide-in slide-out animation for each route on enter and leave within my AngularJS app.
The animations work perfectly on desktop, although bug out on mobile. They do seem to work within the dev tools emulator though.
I have tracked it down to having something to do with the views position not being set correctly with the absolute position. Seems as if when a new view is loaded, they both exist within the page, hence making the pages width twice and large until the old view is unloaded and removed. I then tried a position relative on the parent container, although no luck.
WORKING DEMO
Use overflow: hidden for the container of your views, in the case of your plnkr, it's the <body>
Related
Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
Before toggling a random CSS element
After toggling a random CSS element
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
Neither of these solutions work, some of the dom is still invisible.
Does anyone have a clue as to why this happens?
I think this question has been answered here: custom #font-face does not load in chrome (chrome custom fonts not rendering)
I have done a quick test and it seems to have fixed things.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.
I am using jquerymobile 1.4.2.
I tried with all the functions which are specified using jquery(scrollTop).But it snot working in my page.
Is it possible to scroll to a specific position using css when we reload a page or when submit a button.
Your problem is that you have the script at the top of the page. I see you wrapped it in a $(document).ready() but that alone isn't always guaranteed to work, like in your case. $(document).ready fires when the dom is loaded, the dom tells the browser that somewhere in the page there is an image, but the browser won't know the size (in pixels) of that image until it's completely loaded. This causes your issue:
1) dom starts loading
2) dom is done, $(document).ready() fires
3) the script tries to animate the scrollTop but it won't work because the page has not yet reached its complete height (because the images are not loaded), so there is no scrollbar.
4) the images load but the script has already done its job
Solutions:
1) add height and width attributes to your images
2) use $(window).load() instead of $(document).ready()
A hint for the future: if the problem is "sometimes it works, sometimes it doesn't" it's a timing problem 90% (or even more) of the times. So try to figure out what happens and when.
No, there's no way to do that in CSS. Sorry!
Maybe, you should try for this one : jQuery.mobile.silentScroll()
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
Using this article I made an overlay div fade in/out on mouse click with ng-hide/ng-show. It works fine except one small thing - when page is loading and not all Angular is loaded yet, the overlay flickers for a moment then fades out when Angular loads respective variables that are in charge for overlay visibility.
The div looks like this in Jade:
.overlay(ng-show="overlayStatus=='on'", ng-init="overlayStatus='off'", ng-animate="'fade'")
Now to remove that flickering, and make the overlay hidden on load without Angular evaluations, I add style="display:none;" to this div and it seems to fix the issue. Though I am not sure if it's a proper way to do this.
Please advise.
You need to use ng-cloak directive
I've had an intermittent problem that I thought was due to un-cleared floats. What happens in Chrome (my main development browser) is the vertical scrollbar will lock in the top position and I cannot scroll down the page. Initially when the page starts to load it will allow you to scroll and then when the page is loaded it will jump back to the beginning and lock itself.
I've just been ripping apart my pages looking for un-cleared floats and missing tags and finally found out that it is due to a URL having a # at the end (which gets programatically added and remains when I refresh the page).
This issue only happens in chrome - does not appear to happen in other webkit browsers.
I assume its looking for an anchor and not finding it and then giving up. Its definitely a bug but was wondering about a workaround, or why it is only doing it on my site - I can't duplicate it for instance here.
Shift click the URL to open in new browser:
URL that will lock : /faq#
URL that doesn't lock (same but without the #): /faq
For me, the solution was in a popup div's style: I had to make sure a div with a z-index and no float but surrounded by floating divs was given the style float:none and an explicit width (floating this was not needed as it was absolutely positioned). I have a thread working through this here.