Fixed position box in Symbol within Symbol

Tips & Tricks
1

How can I create a “fixed” position for an object which is in a Symbol 2 which is also within another Symbol 1 (this first level Symbol is 100VH) ?

If I assign the fixed CSS to the same object at the main level (box on left side of page stays fixed), it works, but not when it is inside a Symbol in a Symbol (box on right side of page scrolls up)…?

image
image2548×1222 88.9 KB

CSS used:

On the first level Symbol:

.vh{
height : 100vh !important;
}

On both white boxes :

.fixed {
position: fixed !important;
}

Thank you!

2

I tried a little experiment and see it kinda-sorta works on Safari:

vh-test.hype.zip (14.5 KB)

It seems to blank out the inner box when the scroll reaches the end of the page though.

I can get it to display correctly on Chrome and Firefox if I uncheck “Use WebKit graphics acceleration” and check “Position with CSS left/top” in the Document Inspector. But then it doesn’t work in Safari…

In testing some simple HTML (using left/top CSS) it seems to work pretty well everywhere, so there’s probably a combination of Hype’s DOM setup and browsers bugs that are causing issues.

vh-test.html.zip (1.0 KB)

1 Like
3

When you uncheck “Use WebKit graphics acceleration” it works perfectly (in my experience) in Safari, Chrome and Firefox.

However, this will lead to another set of issues by unchecking Graphics Acceleration. Is there any specific hack that allows me to override what Graphics Acceleration is doing, without unchecking it (i.e. how does Graphics Acceleration relate to this obscure CSS property to begin with)?

4

Could this be the source:
transforms and absolute positioning convert fixed positioning relative to the parent …

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

https://www.w3.org/TR/css-transforms-1/#transform-rendering
https://www.w3.org/TR/css-transforms-1/#module-interactions

5

To aid in a solution, I'd be curious what those issues are?

It appends a rotateY(0deg) to the CSS transform property. Because transform is a single string, you can't really force append just this transformation. With "Position with CSS left/top" unchecked (the default), Hype will use the transform property for basic positioning and there's really no way to override. If you check it, you could override on elements that don't end up making use of scales, rotates, or skews. I think the CSS specificity rules mean you'd probably need to add it to an element via ID (like "myelement") for each one and not a given class name.

#myelement {
	transform:rotateY(0);
}

YMMV - Hype really wants to control the transform property.

1 Like
6

Will have to see what issues come up by unchecking GA. Usually, when you make major changes to features which have been “on” during development, issues show up down the line :slight_smile:

I have Position with CSS checked by default. So no problem there.

1 Like