Created
March 30, 2016 20:13
-
-
Save felixbuenemann/fe55d1615301b6a572cd80e97101428e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Swiper Firefox Transition-Bug</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> | |
| <!-- Link Swiper's CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css"> | |
| <!-- Demo styles --> | |
| <style> | |
| html, body { | |
| position: relative; | |
| height: 100%; | |
| } | |
| body { | |
| background: #c7c7c7; | |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
| font-size: 16px; | |
| color:#000; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .swiper-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .swiper-slide { | |
| background-position: center; | |
| background-size: cover; | |
| } | |
| .swiper-wrapper { | |
| position: relative; | |
| } | |
| h1 { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| font-size: 5em; | |
| color: red; | |
| transition: all 700ms ease-in-out; | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .swiper-slide-active h1 { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Swiper --> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide" style="background-image:url(http://dummyimage.com/2600x1268/c7c7c7/000000.jpg)"><h1>Slide 1</h1></div> | |
| <div class="swiper-slide" style="background-image:url(http://dummyimage.com/2600x1268/c7c7c7/000000.jpg)"><h1>Slide 2</h1></div> | |
| <div class="swiper-slide" style="background-image:url(http://dummyimage.com/2600x1268/c7c7c7/000000.jpg)"><h1>Slide 3</h1></div> | |
| <div class="swiper-slide" style="background-image:url(http://dummyimage.com/2600x1268/c7c7c7/000000.jpg)"><h1>Slide 4</h1></div> | |
| <div class="swiper-slide" style="background-image:url(http://dummyimage.com/2600x1268/c7c7c7/000000.jpg)"><h1>Slide 5</h1></div> | |
| </div> | |
| <!-- Add Pagination --> | |
| <div class="swiper-pagination swiper-pagination-white"></div> | |
| <!-- Add Arrows --> | |
| <div class="swiper-button-next swiper-button-white"></div> | |
| <div class="swiper-button-prev swiper-button-white"></div> | |
| </div> | |
| <!-- Swiper JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> | |
| <!-- Initialize Swiper --> | |
| <script> | |
| var swiper = new Swiper('.swiper-container', { | |
| pagination: '.swiper-pagination', | |
| paginationClickable: true, | |
| nextButton: '.swiper-button-next', | |
| prevButton: '.swiper-button-prev', | |
| spaceBetween: 30, | |
| effect: 'fade', | |
| loop: true, | |
| keyboardControl: true | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This test case shows a bug in Firefox (tested in 45.0 Beta and 46.0a2 Developer Edition), where the background image of the slides gets warped horizontally, if there are two concurrent css transitions.
The bug only gets triggered, if the rendered width is greater than 4096px (display size greater than 2048px when using HiDPI).
Screen-Capture from Firefox 45.0 running on Mac OS X 10.11.4 with screen res of 3200x1800 HiDPI on a 3840x2160 UHD display (meaning the desktop is rendered at 6400x3600px and then scaled down to 3840x2160px).
The browser window in the capture had a displayed size of 2447x1453 HiDPI or 4894x2906px actual rendered size.
The example uses the Swiper slider v3.3.1.