Position transition issue in Safari 6

[bjamieson]

I am attempting to mimic an OS X sheet (dialog). See this pen for an example:

http://codepen.io/bjamieson/pen/Dbczj

The dialog is initially positioned off canvas by setting the top to -500px. On mobile safari this still allows the dialog to be seen when quickly scrolling backward, so the dialog is also positioned left -1000px.

When the button is clicked a class is added to re-position the dialog in the viewport. CSS transitions are used to animate the entry and exit of the dialog.

This works in Chrome 28 and Firefox 2, but not in Safari. In Safari, the entry animation works fine, but the exit animation is not applied.

However, if the units on the left position are changed from px to %, the problem goes away.

[Kitty Giraudel]

> However, if the units on the left position are changed from px to %, the problem goes away.

I’m not sure why you feel the need to edit the left offset. Don’t you want the modal to always be horizontally centered?

[bjamieson]

When the modal is displayed I want it to be centered. So at first to hide the modal I moved it out of the viewport with a negative top.

But this ended up being buggy on mobile safari. When you scroll down the page a bit, then scroll back up, the modal is in view until the scroll stops.

So I added the additional step of pulling the dialog out of the viewport both top and left. This complicates the transition, in that the left transition needs to take 0s so the top transition is visible. But it was the only solution I found that worked.

Getting this to work consistently has been one of those exercises in finding a tweaking options until one combination works. But I still can’t explain why Safari is happy with percents in one case and pixels in another.

[Kitty Giraudel]

What about simply hiding it left? No more issue with top then.

[bjamieson]

Only positioning left means I cannot get the cool ‘slide down from the top of page like OS X’ effect I was going for.

My larger motivation for getting my head around how this works is to start to develop some tactics for replacing display:none, which doesn’t play nice with animations.

[Author]

Posts