The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with transforms and position:fixed

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #235412

    Hi there,

    I’m having two weird issues with a really niche layout. My client wants a fullscreen slider, where each individual slide can be scrolled for more content below the fold.


    Problem 1) The codepen initially shows the desired behavior (the skewed segment slides over the intro segment, and reveals the results segment). Clicking transform adds a 3D transform to the segments that is the equivalent of setting that slide to the active slide. The position: fixed that enables the intro and results segments fail, and the skew introduces a large whitespace gap. Is there an alternative way to accomplish fixed full-screen background images?

    Problem 2) When the skewed section is in the viewport, you should be able to see the top corner of the intro section, and bottom corner of the results section. I’ve currently got it close, by positioning each in half their respective halves of the screen. However background-size: cover results in a jump when it resizes from 50vh to 100vh. Can anyone think of a way to avoid that jump? (Clicking the opacity button fades the skewed element so it’s easier to see the jump)

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.