From 7890085c6c41f556f63a6efcbfbb5f7b970a7aeb Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Mon, 4 Aug 2014 10:55:29 -0700 Subject: [PATCH] Fixed: CPPopover animation issue Previously, when opening a popover after another one, the CPPopover was blurred. This occurred due to some CSS Transitions specification : "Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others." The fix consists to access to a transform value of the style of the _DOMElement to force it to recalculate the values. More information here : https://code.google.com/p/chromium/issues/detail?id=388082 Fixed #2143 Test app in Test/Manual/CPPopover --- AppKit/_CPPopoverWindow.j | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/AppKit/_CPPopoverWindow.j b/AppKit/_CPPopoverWindow.j index 8ee818d79..c90cf28b6 100644 --- a/AppKit/_CPPopoverWindow.j +++ b/AppKit/_CPPopoverWindow.j @@ -513,6 +513,9 @@ var _CPPopoverWindow_shouldClose_ = 1 << 4, { // We are watching opacity, so this triggers the next transition #if PLATFORM(DOM) + // We force the style to recalculate the values, this is needed to avoid a transition issue + // More information here : https://code.google.com/p/chromium/issues/detail?id=388082 + [self _currentTransformMatrix]; _DOMElement.style.opacity = 1; _DOMElement.style.height = frame.size.height + @"px"; _DOMElement.style.width = frame.size.width + @"px"; @@ -608,7 +611,7 @@ var _CPPopoverWindow_shouldClose_ = 1 << 4, _DOMElement.removeEventListener(CPBrowserStyleProperty('transitionend'), _orderFrontTransitionFunction, YES); _DOMElement.removeEventListener(CPBrowserStyleProperty('transitionend'), _transitionCompleteFunction, YES); - var matrix = window.getComputedStyle(_DOMElement, null)[CPBrowserStyleProperty(@"transform")], + var matrix = [self _currentTransformMatrix], currentScale = (matrix.split('(')[1]).split(',')[0]; [self setCSS3Property:@"Transform" value:@"scale(" + currentScale + ")"]; @@ -652,6 +655,13 @@ var _CPPopoverWindow_shouldClose_ = 1 << 4, #pragma mark - #pragma mark Private +- (CPString)_currentTransformMatrix +{ +#if PLATFORM(DOM) + return window.getComputedStyle(_DOMElement, null)[CPBrowserStyleProperty(@"transform")]; +#endif +} + - (BOOL)_hasOnlyTransientChild:(_CPPopoverWindow)aWindow { var childWindows = [aWindow childWindows];