I've just dropped a TabNavigator into my application:
<mx:TabNavigator width="100%" height="100%"
backgroundColor="#F7F7F7">
<custom:SomeCustomContainer label="Details" />
<mx:Canvas label="Reporting" width="100%" height="100%">
</mx:Canvas>
</mx:TabNavigator>
And when the app first loads, everything seems fine:
everything working http://img.skitch.com/20090818-dimqrp3ghd89fp9eftipafajk3.jpg
Until I click the 'Reporting' tab. Then, sometimes, the the rest of the application (that is, everything outside of the TabNavigator) goes white:
alt text http://img.skitch.com/20090818-tgud6797qcx18fwxwkik38nrp9.jpg
Everything seems to go back to normal when Flash is asked to do a redraw (for example, the browser window looses then regains focus).
So, err… Is this normal? Is there some simple way to fix it?
Edit: I've tried a variation on Joel's suggestion:
// Where 'this' is the main Application
ChangeWatcher.watch(this, ["myTabNavigator", "selectedIndex"], function() {
invalidateDisplayList()
});
And it mostly works… Except for a small portion of the ApplicationControlBar, which remains white:
control bar is still white http://img.skitch.com/20090903-fbif9r67jg9wx1rkiwad7sbey6.png
Setting the historyManagementEnabled property of the TabNavigator to false works for me.
I had this issue with Firefox on Mac. I use PureMVC so my solution wasn't too painful, but I manually dispatch an Event.RESIZE from my root application when I switch tabs. This forces the displayList to refresh and solved the problem.
Related
My Problem:
In my project, there is an animated container (named .uebersicht) who brings in some divs with a scrollable list. The animation flips (thanks david walsh) between two different lists in my app. Because both of them should be scrollable I have to flip and kick away the flipped container.
I have simplified my markup and CSS and made a fiddle - but the fiddle is working correct :D (maybe a good trace...) So I put it on a hosting service.
site (scrolling not working): http://fiddle.bplaced.net/52426221/
fiddel (same code, works as expected): https://jsfiddle.net/58omteyL/5/
Nevertheless, for a better understanding I visualize my problem:
(if you wonder about the different containers, they are important for the rest of the app)
My approach works well on touch and mouse interaction but the Mac trackpad (like the one in a MacBook) and maybe (could not test this) the magic pad and magic mouse on Mac are just able to scroll the container every 2nd/3rd/4th time.
It seems that Safari 12.0 under MacOS 10.13.6 tries to scroll the wrong container (window-element).
Reproduce the bug:
check out the fiddle with a MacBook/MagicPad/MagicMouse
set
your system scrolling direction to not natural
point in the yellow container and scroll down
if this works (sometimes) move and click around (inside or outside the container) and try again
It seems that there is an area in the container where scrolling never works.
Why this is a SO Question:
You could argue that this is a Safari bug and nothing for SO. But when I'm using the animations from w3css (unfortunately there is no flip) scrolling works as expected.
Hints from the Comments here
When the div is scrolled to the top and you scroll up, the focus goes to the parent and you have to lift the fingers before you are able to scroll down
My trackpad setting is not natural (swipe down = scroll down) changing these setting to natural (swipe up = scroll down, this is standard) make my example work
When scrolling is blocked you can't even scroll with js using scrollTo etc. No scrolling event is fired
The question stays the same because I can not ensure that every user has the setting to natural and not not natural like me.
I have got the bug on: MacBook Pro (15-inch, 2016)
Safari : Version 12.0 (14606.1.36.1.9)
I have added overflow: hidden to HTML, BODY and seems working.
It might be related to locking the body while scrolling but not sure.
I can test it again if you update the code by adding
html,body {
overflow:hidden
}
It's very hard to reproduce and trace properly the issue, but what it seems to work on my Mac is to add overflow:hidden; also on the other two wrappers id="item1" and class="content". In that way the only thing that remains to scroll is the div you want to scroll. I think it could be worth to give it a try.
MacBook Pro (Retina, 15-inch, Early 2013) - OS 10.14.1 -
Safari version Version 12.0.1. - trackpad natural and not not natural
Hope this help.
Finally after a few good comments here I found a solution but it is more likely a workaround (thanks for your input).
I played around with some eventListeners, capturing and bubbling. It seems that the scrolling goes down to the scroll element (capture) but is not bubbling up again. Listen to the scroll event and scroll via JS in the right direction until DOM is unblocked was getting to complicated. But if I modify the style (position/size) of the scrolling element .styleWrap .scrollable the blocking was gone !
After that it turns out that it prevents Safari from any blocking when I modify this element after the animation was finished.
So my workaround is to make a style change and revert that after the CSS animation has been finished - and voilà :
function slide(slideName){
// scroll to top
scroll(0,0);
// show the Slide
var slideElement = document.getElementById(slideName);
slideElement.classList.add('show');
}
setTimeout(function(){
slide('item1');
// make a change to be able to revert this change
var scrollDiv = document.querySelector(".scrollable");
scrollDiv.style.top = "1px";
// change some style (reset the prev. change)
setTimeout(function(){
document.querySelector(".scrollable").style.top = "";
}, 1300 + 10); // CSS animation time + 10ms
}, 100);
Maybe this is the reason why the w3css animation does not lead into blocking...
You can test it here (I add more px to the topto make it more visible here): http://fiddle.bplaced.net/52426221g/
I'm not 100% satisfied with this solution because:
it is a CSS problem solved with JS
you need to know the animation timings (which can change with design)
Therefore I would like to change the accepted answer if there is a CSS solution
I'm doing an application in windows phone 8.1 that contains several pages and you can navigate between them.
Default animation when I change the page it's like a flip animation. Is it possible to change it?
I want a fade out (page that is going out) and fade in (page that is going in) in most of changes. Is it possible?
I tried to put this:
<Grid.Transitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.Transitions>
but I still see flip transition.
Thank you very much!
You have to use a Navigation Transition in each page to decide the transition used when you navigate to that screen.
For example, with this code you'll use a SlideTransition when you go to that screen and when you leave it:
<Page
...>
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<SlideNavigationTransitionInfo />
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>
...
</Page>
Some transitions are:
CommonNavigationTransitionInfo
SlideNavigationTransitionInfo
ContinuumNavigationTransitionInfo
I'm not sure if there're more or if you can choose a fade in/out.
I am adding ContinuumNavigationTransitionInfo to my application, and I have an issue (I'll get to it in a moment) which I think might be solvable by setting the ExitElement property to something appropriate. So, what does ExitElement do, and how do I use it?
For example I see no difference setting the property (very naively):
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<ContinuumNavigationTransitionInfo>
<ContinuumNavigationTransitionInfo.ExitElement>
<Canvas Background="Red" Width="500" Height="500" />
</ContinuumNavigationTransitionInfo.ExitElement>
</ContinuumNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>
The issue I'm trying to solve, which I'm hoping I might be able to solve with this property, is that I have a page in my app which forces the light theme (RequestedTheme="Light"). This page can link to itself, but as I'm running the OS in dark theme, I see a startling black flash in the transition, which I think is the OS theme background color, which I'd like to override as white.
You set the exit element on one of your content elements on your page, not in the TransitionInfo iself. I is only writable, because the page will set the exit element when initiating the transition.
Like for example:
<TextBlock Text="This is the exit element" ContinuumNavigationTransitionInfo.IsExitElement="True" />
If you set this, the exit element will get animated (it kind of flies out to the bottom of your page). You don't have to set it to the ContinuumNavigationTransitionInfo itself, but on one of your pages elements.
Also be aware: The Exit element is set on the page from that you are navigating TO a page with the Continuum Navigation on it.
So:
Page 1 (Set IsExitElement = true here)
Page 2 (Set ContinuumNavigationTransitionInfo here)
I am trying to create an image manipulation application that has two fundamental layers. The user can 'rotate' between the main and secondary layers which exist within the same location in the window. To accomplish this, I have code like this:
<div ng-hide="layer != 'main'">
<canvas id="main-layer"></canvas>
</div>
<div ng-hide="layer != 'secondary'">
<canvas id="secondary-layer"></canvas>
</div>
The Angular code shouldn't detract from the question here. Whenever the main layer is selected, the secondary layer's CSS display attribute is set to none
display: none !important
The problem is that the selection mechamism of FabricJS does not work on the secondary layer. When I try to either object:selected or mouse:down on an object, nothing happens. The blue mouse dragging selection that happens by default is also not there.
Strangely enough, if I swap the divs containing the canvas, selection works on the secondary layer and 'sort of' works on the main layer (it is 'off' from where the mouse is).
<div ng-hide="layer != 'secondary'">
<canvas id="secondary-layer"></canvas>
</div>
<div ng-hide="layer != 'main'">
<canvas id="main-layer"></canvas>
</div>
Is there a way to actually stack canvases in FabricJS?
UPDATE:
I noticed that if I move to the secondary canvas and summon the Chrome web dev tools, the canvas works perfectly. On the other hand, if I rotate to the main canvas, that one does not work until I summon the Chrome web dev tools. Strange.
I found that that this was actually an AngularJS issue, not a FabricJS issue. The problem stems from the fact that whenever I rotate from one layer to the other, I call calcOffset() immediately without waiting for the scope to properly propagate to the DOM. This means that FabricJS has no idea that the canvas is there. I solved this issue by essentially waiting till the scope had propagated by adding:
$timeout(function() { scope.canvas.calcOffset(); }, 0);
I am trying to set the softKeyboardType to email but when ever i use skinClass="spark.skins.mobile.TextAreaSkin" it doesn't change it but when i take off skinClass="spark.skins.mobile.TextAreaSkin" it does work. The problem is i need the skinClass="spark.skins.mobile.TextAreaSkin" class to allow my application so scroll with out it the text does not stay with in the bounds of the text input boxes. Has anyone seen this problem or another fix the the scrolling problem?
Code examples
<s:TextInput softKeyboardType="email" id="id1" width="100%" skinClass="spark.skins.mobile.TextInputSkin" />
<s:TextArea softKeyboardType="email" id="id2" height="400" width="100%" skinClass="spark.skins.mobile.TextAreaSkin" />
Thank for the help,
Justin
I've checked mobiletheme default.css in flex 4.6 sdk
adobe is using different skins for TextInput and TextArea components
TextArea
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin");
}
TextInput
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin");
}
so I think you should use StageTextAreaSkin or StageTextInputSkin as a skinClass for corresponding components
softKeyboardType will work in this case but text position problem will stay, I think you will need to change/fix StageTextAreaSkin or StageTextInputSkin sources for your scrolling
Confronted with this issue, I came up with a workaround which worked in my case.
Use default skin, set your softKeyboardType.
While doing layout for your screen, create a section which contains the uppermost part of your screen and which you can easily collaps or toggle its includeInLayout property, so when you do that, it will make your TextInput or TextArea to appear over the keyboard, bypassing the scroller for that purpose.
Then, when your field receives focus, in focusIn handler, you collaps or toggle this section. This does two good things: first, it lifts your field over the keyboard, and second, it removes focus from your field (at least in my case it did, not sure 100%, if it doesn't, then shift focus manually). This is good because when you set focus on your field once again (yourfield.setFocus()), the cursor will appear where you want it, within the bounds of your field.
Once done typing, you restore top section to its original state from focusOut or softKeyboardDeactivate handlers.
Hope this helps...
seems like it's flex 4.6 bug
http://forums.adobe.com/message/4122095