               done()
 
         it 'pushes right-anchored elements away from the edge of the screen', (done) ->
-          scrollbarWidth = up.viewport.scrollbarWidth()
-          $anchoredElement = $fixture('div[up-anchored=right]').css
-            position: 'absolute'
-            top: '0'
-            right: '30px'
-
-          promise = up.modal.visit('/foo', target: '.container')
-
-          u.nextFrame =>
-            @respondWith('<div class="container">text</div>')
-
-          promise.then ->
-            expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + scrollbarWidth, 10)
-
-            up.modal.close().then ->
-              expect(parseInt($anchoredElement.css('right'))).toBeAround(30 , 10)
-              done()
+          $fixture('.spacer').css(height: '9000px')
+          # Safari 11 has no vertical scrollbar that takes away space from the document,
+          # so the entire shifting logic is skipped.
+          if up.viewport.rootHasVerticalScrollbar()
+            scrollbarWidth = up.viewport.scrollbarWidth()
+            $anchoredElement = $fixture('div[up-anchored=right]').css
+              position: 'absolute'
+              top: '0'
+              right: '30px'
+
+            promise = up.modal.visit('/foo', target: '.container')
+
+            u.nextFrame =>
+              @respondWith('<div class="container">text</div>')
+
+            promise.then ->
+              expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + scrollbarWidth, 10)
+
+              up.modal.close().then ->
+                expect(parseInt($anchoredElement.css('right'))).toBeAround(30 , 10)
+                done()
+          else
+            expect(true).toBe(true)
+            done()
 
       describe 'opening a modal while another modal is open', ->
 


        it "brings its own scrollbar, padding the body on the right", (done) ->
          $body = $(document.body)
          $rootOverflowElement = $(up.viewport.rootOverflowElement())

          promise = up.modal.visit('/foo', target: '.container')

          u.nextFrame =>
            @respondWith('<div class="container">text</div>')

          promise.then ->
            $modal = $('.up-modal')
            $viewport = $modal.find('.up-modal-viewport')
            scrollbarWidth = up.viewport.scrollbarWidth()

            expect($modal).toBeAttached()
            expect($viewport.css('overflow-y')).toEqual('scroll')
            expect($rootOverflowElement.css('overflow-y')).toEqual('hidden')
            expect(parseInt($body.css('padding-right'))).toBeAround(scrollbarWidth, 5)

            up.modal.close().then ->
              expect($rootOverflowElement.css('overflow-y')).toEqual('scroll')
              expect(parseInt($body.css('padding-right'))).toBe(0)
              done()

        it "gives the scrollbar to .up-modal instead of .up-modal-viewport while animating, so we don't see scaled scrollbars in a zoom-in animation", (done) ->
          openPromise = up.modal.extract('.container', '<div class="container">text</div>', animation: 'fade-in', duration: 100)

              restoreBody()
              done()

        it "does not add right padding to the body if the document's overflow element has overflow-y: auto, but does not currently have scrollbars", (done) ->
          restoreBody = e.writeTemporaryStyle(up.viewport.rootOverflowElement(), overflowY: 'auto')
          restoreReporter = e.writeTemporaryStyle($('.jasmine_html-reporter'), height: '100px', overflowY: 'hidden')

          up.modal.extract('.container', '<div class="container">text</div>').then ->
