Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1285953

    Hi there,

    We’re working on a demo site for a client:

    The image above the fold on this page is built as a full screen slider. On Chrome / iMac 27″ display it works just fine. On Safari / same iMac 27″ and MacBook pro with trackpad it “shakes” or kinda bounces upon user scroll. Help?


    Hey jaimemerz,

    I cannot reproduce the issue. Can you please make a screencast of the issue?

    Best regards,


    Why is it fixed on safari and on other browsers not – there it scrolls.
    Safari is one browser that can not handle good the css with background-attachment : fixed.
    there are workarounds here on board – to set the background-attachment : scroll and place a pseudo-container with the inherited image as background and place the pseudo-container on position : fixed

    Edit – may i ask you why you had to work with the slider? and not with a 100% color-section. this Element is not so performance intensive.
    have a look at: – with safari

    /*********** Safari Fix for background-attachment: fixed  **************/
    /********* give a custom-class to the color-section:   bg-fixed  ***********/
    /***** Set the image to background-attachment : scroll and :  **********/  {
    	-webkit-clip-path: inset(0 0 0 0);
    	clip-path: inset(0 0 0 0);
    	background-size: 0 !important;
    	overflow: hidden;
    	position: relative;
    } {
      background-image: inherit !important;
      background-repeat: inherit !important;
      background-size: cover;
      background-position: inherit;
      content: "";
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1 !important;
      pointer-events: none;
      will-change: transform;  /*** if you got more than 3 images like this - comment this out ***/
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.