Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-fab-speed-dial does not work correctly for up/down in Safari #3375

Closed
Sayene opened this issue Jun 20, 2015 · 8 comments
Closed

md-fab-speed-dial does not work correctly for up/down in Safari #3375

Sayene opened this issue Jun 20, 2015 · 8 comments
Assignees
@topherfangio
Milestone
1.0-rc1

Comments

@Sayene
Copy link

Sayene commented Jun 20, 2015

None of the examples, including demo here (https://material.angularjs.org/HEAD/#/demo/material.components.fabSpeedDial) work correctly with direction set to 'up' or 'down' in Safari. For 'down' direction', only one button is visible (looks like overlapping others). For up - no button is visible when opened. No errors in console. Checked with Safari Version 8.0.6 (10600.6.3)
@Sayene Sayene changed the title md-fab-speed-dial does not work in Safari md-fab-speed-dial does not work correctly for up/down in Safari Jun 20, 2015
@Sayene
Copy link
Author

Sayene commented Jun 21, 2015

The same problem in Safari on iOS (8.3) and on Android in native browser (5.0)

@Sayene Sayene closed this as completed Jun 21, 2015
@Sayene Sayene reopened this Jun 21, 2015
@topherfangio topherfangio self-assigned this Jun 23, 2015
@topherfangio
Copy link
Contributor

Thanks @Sayene, I will take a look and see if we can fix this!

topherfangio added a commit that referenced this issue Jun 26, 2015
@topherfangio
fix(fabSpeedDial): animations fail on Safari
919ca98 
update webkitTransform styles and set height to initial instead of 100%

references #3375
topherfangio added a commit that referenced this issue Jun 26, 2015
@topherfangio
fix(fabSpeedDial): fix many visual issues
9335f61 
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
@topherfangio topherfangio mentioned this issue Jun 26, 2015
Closed
topherfangio added a commit that referenced this issue Jun 28, 2015
@topherfangio
fix(fabSpeedDial): fix many visual issues
d09952f 
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
topherfangio added a commit that referenced this issue Jun 28, 2015
@topherfangio
fix(fabSpeedDial): fix many visual issues
78fcf18 
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

 * more fixes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
topherfangio added a commit that referenced this issue Jul 5, 2015
@topherfangio
fix(fabSpeedDial): fix many visual issues
8081404 
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

 * more fixes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
@daftfox
Copy link

daftfox commented Jul 24, 2015

Im rather new at this (reporting issues), but I don't think this has been fixed yet.
I'm running version 0.10.0 of the angular-material library.
AngularJS: 1.4.3
Browser: safari 8.0S
OS: OSX 10.10

This particular problem is fixed by changing the 'height' attribute of .md-fab-actions from '100%' to 'auto'.

@topherfangio
Copy link
Contributor

@daftfox This was fixed in 919ca98 which hasn't been released yet. If you use the latest version of master, or any of the 0.10.1-rcs, you should see the fix.

I actually did height: initial which made it work, but have recently switched to height: auto in later code to fix some other issues, so these should be pushed soon too.

Can you try against the latest master version and see if it's fixed for you?

@GillesDebunne
Copy link

The FAB Speed Dial demo still does not work on Safari for me. No animation on hover.
Strangely, the 'More options' demo below works.

material.angularjs.org, HEAD = v0.11.0
angular v1.4.6
safari v8.0.8 on Yosemite 10.10.5

@topherfangio topherfangio added this to the 0.12.0 milestone Sep 21, 2015
@topherfangio
Copy link
Contributor

@GillesDebunne The top demo no longer automatically opens on hover (nor does the speed dial). This should have been noted as a breaking change in the Changelog, but I must have missed it, so I apologize. The bottom demo uses ng-mouseenter and ng-mouseleave to duplicate this functionality.

That said, I do see an issue with the close animation not firing in Safari. I will open a separate issue regarding this.

@GillesDebunne
Copy link

Indeed, my bad, I thought I also tried with a click.

I do not see any problem with the close animation BTW.

@topherfangio
Copy link
Contributor

@GillesDebunne Thanks for the update! If you see anything else, definitely open a new issue :-)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@topherfangio topherfangio

Labels
None yet
Projects
None yet
Milestone
1.0-rc1
Development

Successfully merging a pull request may close this issue.

fix(fabSpeedDial): fix many visual issues angular/material
4 participants
@topherfangio @GillesDebunne @daftfox @Sayene