In Durandal 2.1 starterkit the page-host div is positioned absolute (top: 50px,...)
I tried to use static positioning in order to have a common footer after page-host.
.page-host { padding-top: 50px;}
Unfortunately with static positioning the animation is broken - the padding-top (or margin-top) is added only after animation is complete.
Any suggestion how to fix this?
There's two things you could do:
Write your own transition; or
Use the transition from Durandal 2.0.1, which uses javascript to animate rather than CSS animations (as suggested in Rob's release announcement).
The second one is obviously the easiest; you can find the entrance transition from 2.0.1 here:
https://github.com/BlueSpire/Durandal/blob/2.0.1/src/transitions/js/entrance.js
Related
I have a NotificaitonBar-Control as content element of a detail view, which is a element of a splitApp.
In Google Chrome there is no problem, but on the iPad there is a display issue. The notificationBar is between the master- and the detail-View.
The masterview overcovers a part of the notificationBar and the detail-view did not.
How can I resize the notificationBar. I did not find any method or propertie to modify the notificationBar.
If I look at the API I do not understand why it does not match to the detailview:
A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is inherited from the element that the notification bar is added to.
SAPUI5 NotificationBar API
How can I solve this issue?
From the namespace sap.ui.ux3 I assume that the NotificationBar is not really responsive and therefore not working on smaller devices like the iPad.
I found a demopage for the NotificationBar which has some interesting information:
If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar
This means you have to do the resizing via good old CSS. The example they gave looks similar to the following snippet.
style.css (or however your custom CSS file is named)
.slimNotificationBar {
left : 60px;
right: 100px;
}
To make it work on both iPad and Desktop, you should make it responsive by adding media querys (see here: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries)
Your.controller.js (or however it's named)
// after instantiating your NotificationBar
oNotificationBar.addStyleClass("slimNotificationBar");
Link to the demopage: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/ux3/demokit/NotificationBar.html
However, if you prefer a built-in and responsive solution, you might want to try the following approach.
Add a sap.m.Toolbar to your detail page, which has a button that opens a sap.m.MessagePopover.
See the following example: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.MessagePopover/preview
I have a composited div (it has translate3d) with an opacity transition:
#bad {
background-color: red;
-webkit-transition: opacity .5s linear;
-webkit-transform: translate3d(0, 0, 0);
}
If I change its opacity while transition is undergoing, it will flicker in Safari.
The flicker happens about once in three seconds and is akin to a white flash.
There is no such problem in Chrome.
Scroll up and down in this fiddle to see what I mean.
The problem does not seem to be limited to opacity—changing -webkit-transform while its transition is undergoing has a similar effect: once in a while the element is rendered in one of the transition's final states.
The problem goes away if I remove -webkit-transform but unfortunately that's not an option right now.
Can I fix this in Safari by some other means?
The problem is changing property values and adding animations need to happen at the same time.
A race condition not present in OSX 10.5 was introduced when Core Animation was rewritten in C++. I learned this when my experiments with additive animation developed the same flicker. I found the workaround to be Core Animation's kCAFillModeBackwards. I also found the same workaround was effective for CSS Transitions by hacking up my own fork of WebKit, with emphasis on the hacking part. But conjecture doesn't help WebKit devs and I didn't want to annoy them any further. I do think the problem is with Core Animation, not WebKit. I'm guessing that they should use the same CFTimeInterval derived from a single call to CACurrentMediaTime throughout any given CATransaction.
Unlike transitions, CSS animations do allow for fill modes. It might be difficult to reproduce transition behavior, but that is one option. In particular, the challenge would be replacing interrupted animations with new ones that begin where the previous left off. In other words, it's easy to animate from opacity of 0 to 1 or 1 to 0, but what happens if the user wants to start when current animated progress is at 0.577564? This might require manually modifying the #keyframes style rule, not an easy task.
Then there is the question of the appropriate animation-fill-mode. Normally you wouldn't want to perform layout using forward filling animations, you'd use the CSS properties themselves. But in this case it might be simple enough to not set the underlying value, instead use only a forward filling CSS animation that gets replaced but never removed when finished. The alternative is setting the underlying value via element.style and at the same time adding a backwards filling CSS animation.
Of course, the flicker also does not happen if WebKit doesn't use Core Animation. By far the easiest way to prevent the flicker in your case is to not enable hardware acceleration.
Instead of:
-webkit-transform: translate3d(100px, 100px, 0);
try:
-webkit-transform: translate(100px, 100px);
http://jsfiddle.net/z6ejt/9/
In my case I found 3 actions that solved the same problem:
I needed to fade in an image on the ready event, tried with the jQuery animation but the image was flickering on OSX Safari.
Solved with these actions:
1) Analyze the CSS and delete all transition rules applied on the image, they seem to conflict with the animation command.
I had this rule
img {
/*DON'T COPY !!!*/
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
/*DON'T COPY !!!*/
}
I deleted it.
2) Add this CSS rules to the element you need to fade in:
display: none;/*initial state modified by the fadeIn function*/
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-font-smoothing: antialiased;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
3) Use the jQuery function "fadeIn" and don't use the command ".animate({opacity: 1} ecc..".
These actions resolved the flickering problem on OSX Safari .
This seems like a bug in CoreAnimation.
Kevin Doughty blogged about it and provided a simple fiddle to reproduce it.
I am not certain, but I believe it is caused by a Core Animation bug rdar://problem/12081774 a.k.a. the flash of un-animated content.
[...]
I believe the Safari transition flicker is directly related to the bug I filed. The workaround is to use a Core Animation fillMode of kCAFillModeBackwards or kCAFillModeBoth. It seems like there is something wrong with animation timing, where a property value change and an animation started on that property within the same transaction don’t actually begin at the same time. A backwards fill solves this by extending the effect of the late starting animation to be applied before its actual start time.
Kevin also reported this as #115278 in WebKit and tried to tackle it but from my understanding he didn't proceed with this and the patch wasn't accepted.
Of course it's not a real answer (doesn't solve the problem) but at least it explains the problem.
The following CSS fix the transition flicker on safari
* {
-webkit-backface-visibility: hidden;
}
I've figured out how to create an Overlay, center it, and set it's bodyContent to be an existing from my page. So far so good - now I want to make the transition happen smoothly over 1 full second instead of instantaneously.
The examples I've seen indicate that one must know the initial and final positions, but in this case, I don't know them, since I'm just saying:
overlay.set('bodyContent', Y.one('#node'));
overlay.set('centered', true)
I've created a jsbin at http://jsbin.com/ovuxan/5/edit that shows the issue.. (my transition is whacky to say the least) and would appreciate some help in making it smoother.
You can use the WidgetAnim plugin to do this for you. It can be cleaner since the animations are stored in the plugin and invoked by the widget's hide/show functions.
I have quickly used the plugin to animate your overlay here: http://jsbin.com/ohafec/1/edit
Helpful links:
Overlay: Animation Plugin (YUI Blog)
Plugin.WidgetAnim Class
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').