3 ms·

CSS scroll snap slide deck that supports live coding

33 points by damir 5y ago

aeharding 5y ago
CSS scroll snap (and thus, the demo) broken on firefox + macOS unfortunately https://bugzilla.mozilla.org/show_bug.cgi?id=1737820 https://bugzilla.mozilla.org/show_bug.cgi?id=1737820
lelandfe 5y ago
Neat trick! I’ve made style elements visible before, but have never considered making them contenteditable
chrismorgan 5y ago
The example commits the perennial sin of using 100vw, so that it’s somewhat broken on all platforms where scrollbars take width. There is unfortunately probably no way of getting this specific case correct without JavaScript. You may have heard of new viewport units in the pipeline to fix the problems with viewport units, but ugh, they’re only interested in fixing the problems caused by retractable UI chrome, common in mobile browsers, and are still frustratingly utterly broken by design for most desktop platforms. https://github.com/w3c/csswg-drafts/issues/6551 https://github.com/w3c/csswg-drafts/issues/6551, https://github.com/w3c/csswg-drafts/issues/6026 https://github.com/w3c/csswg-drafts/issues/6026. Until all of this stuff gets sorted out, I continue to advise against at least viewport width units in any capacity. I would also add that scroll snapping in general is a misguided feature, enabling functionality that is almost never actually desirable. My observation is that places that use it are almost universally frustrating in some way. Browsers’ implementations are definitely getting better, so that the viewport units problem is almost all that’s left for this example, though accidentally swiping/scrolling past more than one slide is still a problem.
udbhavs 5y ago
I'd love to use scroll-snap more since horizontal snapping is such a common use case and the alternatives are all JS-heavy, but it straight up doesn't work for me on most of the devices I've tried it on (even the MDN docs)

3 ms·

CSS scroll snap slide deck that supports live coding

33 points by damir 5y ago

aeharding 5y ago
CSS scroll snap (and thus, the demo) broken on firefox + macOS unfortunately https://bugzilla.mozilla.org/show_bug.cgi?id=1737820 https://bugzilla.mozilla.org/show_bug.cgi?id=1737820
lelandfe 5y ago
Neat trick! I’ve made style elements visible before, but have never considered making them contenteditable
chrismorgan 5y ago
The example commits the perennial sin of using 100vw, so that it’s somewhat broken on all platforms where scrollbars take width. There is unfortunately probably no way of getting this specific case correct without JavaScript. You may have heard of new viewport units in the pipeline to fix the problems with viewport units, but ugh, they’re only interested in fixing the problems caused by retractable UI chrome, common in mobile browsers, and are still frustratingly utterly broken by design for most desktop platforms. https://github.com/w3c/csswg-drafts/issues/6551 https://github.com/w3c/csswg-drafts/issues/6551, https://github.com/w3c/csswg-drafts/issues/6026 https://github.com/w3c/csswg-drafts/issues/6026. Until all of this stuff gets sorted out, I continue to advise against at least viewport width units in any capacity. I would also add that scroll snapping in general is a misguided feature, enabling functionality that is almost never actually desirable. My observation is that places that use it are almost universally frustrating in some way. Browsers’ implementations are definitely getting better, so that the viewport units problem is almost all that’s left for this example, though accidentally swiping/scrolling past more than one slide is still a problem.
udbhavs 5y ago
I'd love to use scroll-snap more since horizontal snapping is such a common use case and the alternatives are all JS-heavy, but it straight up doesn't work for me on most of the devices I've tried it on (even the MDN docs)