Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-scroll-snap] Do scroll-margin-* properties accept percentages? #3289

Closed
ewilligers opened this issue Nov 6, 2018 · 5 comments
Closed

Comments

@ewilligers
Copy link
Contributor

Should the value accept percentages, or should the computed value exclude percentages?

https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-top

Name: scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left
Value: <length>
Percentages: n/a
Computed value: a computed <length-percentage> value

https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block-start

Name: scroll-margin-block-start, scroll-margin-inline-start, scroll-margin-block-end, scroll-margin-inline-end
Value: <length>
Percentages: n/a
Computed value: a computed <length-percentage> value

https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin

Name: scroll-margin
Value: <length>{1,4}
Percentages: n/a
Computed value: per side, a computed <length-percentage> value

@ewilligers ewilligers added the css-scroll-snap-1 Current Work label Nov 6, 2018
@jonjohnjohnson
Copy link

Well scroll-padding allows <length-percentage>, so I would hope scroll-margin could similarly allow for percentages to resolve against the "corresponding dimension of the [associated] scroll container’s scrollport"?

https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding

@fantasai
Copy link
Collaborator

Looks like an error during the Computed Value line updates. I'll fix it.

@jonjohnjohnson
Copy link

@fantasai So am I correct in thinking a snapport with height of 200px would allow a child element to snap 50px off the top edge when using scroll-snap-align: start & scroll-margin-block-start: 25%?

@fantasai
Copy link
Collaborator

fantasai commented Jan 2, 2019

@jonjohnjohnson Ah, no, scroll-margin doesn't accept percentages. If you look, the fix was to remove the stray mention of them from the Computed Value line. It was explicitly decided not to include them on 'scroll-margin' because, unlike for scroll-padding which is specified on the scroll container, it wasn't clear what the percentage should be relative to: the scrollport? the element's own size? it's containing block width? something else? So we left percentages out of the scroll-margin value space until/unless it becomes clear what they most need to do.

@jonjohnjohnson
Copy link

@fantasai IMHO I think the group should give another look at scroll-margin accepting percentages as relative to the scrollport, since we also have percentage values in box offsets/insets for a sticky position scheme being relative to the scrollport. I've been playing around with mixing sticky and snap features, wishing they jived better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants