From aaf07840e64650c5608696cd65ac771c9fc0f90c Mon Sep 17 00:00:00 2001 From: Ivan Vermeyen Date: Fri, 25 Aug 2017 16:34:26 +0200 Subject: [PATCH] Avoid .slide-overlay to have 0px height in Safari --- package.json | 2 +- public/css/slider.min.css | 2 +- src/scss/_slide.scss | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 354883e..8d7d570 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codezero-jquery-slider", - "version": "1.0.2", + "version": "1.0.3", "description": "Responsive jQuery Slider", "main": "src/js/slider.js", "scripts": { diff --git a/public/css/slider.min.css b/public/css/slider.min.css index ac86c09..1b93c43 100644 --- a/public/css/slider.min.css +++ b/public/css/slider.min.css @@ -1 +1 @@ -.slider,.slider-track,.slider-viewport{position:relative}.slide,.slider-track{display:-webkit-box;display:-ms-flexbox}.slide-data-background,.slide-image-caption{bottom:0;right:0;position:absolute;display:block}.slide-data-background,.slide-image{-webkit-transition:-webkit-transform .3s}.slider-viewport{overflow:hidden}.slider-track{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slide,.slide-overlay{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal}.slider.no-slide .slider-track{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slide{display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;max-width:100%;-ms-flex-preferred-size:auto;flex-basis:auto;height:auto;background:0 0;color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}.slide+.slide{margin-left:0}.slide-overlay{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;background:rgba(0,0,0,.5)}.slide-cover-width .slide,.slide-cover-width.slide,.slide-full-width .slide,.slide-full-width.slide{-ms-flex-preferred-size:100%;flex-basis:100%}.slide-data-background{top:0;left:0;z-index:-1;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.slide:hover .slide-data-zoom-background{-webkit-transform:scale(1.1);transform:scale(1.1)}.slide[data-background],.slide[data-zoom-background]{background:0 0}.slide{margin-left:-1px;margin-right:-1px}.slide-image{display:block;position:relative;text-align:center;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.slide-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.slide-image-caption{left:0;z-index:1;padding:.8em;text-decoration:none;font-size:14px;color:#fff;background:rgba(0,0,0,.4);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slide-image-hoverlay,.slider-next,.slider-prev{position:absolute;bottom:0;font-size:30px;overflow:hidden}.slide-image:hover .slide-image-caption{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-image-hoverlay{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;left:0;z-index:10;width:0;color:rgba(255,255,255,.8);background:rgba(0,0,0,.3);-webkit-transition:opacity .4s,width 0s linear .4s;transition:opacity .4s,width 0s linear .4s;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.slide-image:hover .slide-image-hoverlay{-webkit-transition:opacity .4s,width 0s linear 0s;transition:opacity .4s,width 0s linear 0s;width:100%;opacity:1}.slide-image img{vertical-align:middle;border:none;max-height:auto}.slide-image-background-wrapper{background-size:cover;background-repeat:no-repeat;background-position:center center}.slide-image-background-wrapper .slide-image-background{opacity:0}.slide-cover-width .slide-image{width:100%}.slider-next,.slider-prev{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;z-index:100;width:30px;background:rgba(0,0,0,.3);color:#fff;text-decoration:none;-webkit-transition:width .3s ease .4s,background .3s,color .3s;transition:width .3s ease .4s,background .3s,color .3s}.slider-next:hover,.slider-prev:hover{background:rgba(0,0,0,.6);color:#ffdd8a;text-decoration:none}.slider-prev{left:0}.slider-next{right:0}.slider-end .slider-next,.slider-start .slider-prev{background:rgba(0,0,0,.3);color:#7e7e7e;width:0}.slider.no-slide .slider-next,.slider.no-slide .slider-prev{display:none} \ No newline at end of file +.slider,.slider-track,.slider-viewport{position:relative}.slide,.slider-track{display:-webkit-box;display:-ms-flexbox}.slide-data-background,.slide-image{transition:-webkit-transform .3s;display:block}.slider-viewport{overflow:hidden}.slider-track{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slide,.slide-overlay{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal}.slider.no-slide .slider-track{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slide{display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;max-width:100%;-ms-flex-preferred-size:auto;flex-basis:auto;height:auto;background:0 0;color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}.slide+.slide{margin-left:0}.slide-overlay{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background:rgba(0,0,0,.5)}.slide-cover-width .slide,.slide-cover-width.slide,.slide-full-width .slide,.slide-full-width.slide{-ms-flex-preferred-size:100%;flex-basis:100%}.slide-data-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.slide:hover .slide-data-zoom-background{-webkit-transform:scale(1.1);transform:scale(1.1)}.slide[data-background],.slide[data-zoom-background]{background:0 0}.slide{margin-left:-1px;margin-right:-1px}.slide-image{position:relative;text-align:center;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.slide-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.slide-image-caption{display:block;position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.8em;text-decoration:none;font-size:14px;color:#fff;background:rgba(0,0,0,.4);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slide-image-hoverlay,.slider-next,.slider-prev{position:absolute;bottom:0;font-size:30px;overflow:hidden}.slide-image:hover .slide-image-caption{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-image-hoverlay{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;left:0;z-index:10;width:0;color:rgba(255,255,255,.8);background:rgba(0,0,0,.3);transition:opacity .4s,width 0s linear .4s;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.slide-image:hover .slide-image-hoverlay{transition:opacity .4s,width 0s linear 0s;width:100%;opacity:1}.slide-image img{vertical-align:middle;border:none;max-height:auto}.slide-image-background-wrapper{background-size:cover;background-repeat:no-repeat;background-position:center center}.slide-image-background-wrapper .slide-image-background{opacity:0}.slide-cover-width .slide-image{width:100%}.slider-next,.slider-prev{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;z-index:100;width:30px;background:rgba(0,0,0,.3);color:#fff;text-decoration:none;transition:width .3s ease .4s,background .3s,color .3s}.slider-next:hover,.slider-prev:hover{background:rgba(0,0,0,.6);color:#ffdd8a;text-decoration:none}.slider-prev{left:0}.slider-next{right:0}.slider-end .slider-next,.slider-start .slider-prev{background:rgba(0,0,0,.3);color:#7e7e7e;width:0}.slider.no-slide .slider-next,.slider.no-slide .slider-prev{display:none} \ No newline at end of file diff --git a/src/scss/_slide.scss b/src/scss/_slide.scss index 338d0c9..13efa48 100644 --- a/src/scss/_slide.scss +++ b/src/scss/_slide.scss @@ -27,7 +27,6 @@ justify-content: $slide-vertical-align; align-items: $slide-horizontal-align; width: 100%; - height: 100%; background: $slide-background-overlay; }