[Menu] - Error with fixed menus, visiting official menu doc page in Safari (OS X / iOS)

[pedrosanchezpernia]

Visiting http://semantic-ui.com/collections/menu.html from Safari in Mac OS X is buggy, showing all fixed examples menus (left, top, right and bottom) on the viewport instead of inside a segment, therefore hiding content and navigation sidebar.

Same problem visiting on Safari iOS8, or Chrome iOS8. And due to vertical widths, no content at all is visible. However the same page works as expected on MacOSX Chrome, and MacOSX Firefox.

I wonder if it is a simple bug for this page, or an UI behavior of the distribution.

[jlukic]

Hi, there is an ambiguity in the 2d transform w3c spec on whether transform should create a a new stacking context for position: fixed;. In Chrome and FF, they do create a new context, in IE and Safari they do not.

I was using this as a way to "contain" the fixed demos for docs, since they will fix themselves to the viewport. Seeing how this breaks IE/Safari it was probably a bad idea. Perhaps I should use an iframe or something else.

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

[pedrosanchezpernia]

Hey, thanks for answering so fast ! Your tip drove me to the solution. This can be solved dubbing the "transform" on css with the "-webkit-transform" variation. I did that on a web inspector on Safari and the menu behave as expected.

I found the solution here http://caniuse.com/#feat=transforms2d where it stands that this feature is supported only with prefix on Safari.

[jlukic]

Ah, to fix things in IE. I've gone ahead and swapped things to iframes. https://github.com/Semantic-Org/Semantic-UI-Docs/commit/3ef7d72baa7d95cd8c3722f8ab842150aae530e5

[pedrosanchezpernia]

IE9 seems to need also an "-ms-transform" prefix. Anyway, the prefix way may hopefully solve some other issues with the 2.0 distribution.

Thank you for your work, semantic-ui rocks.

[jlukic]

:+1: