Created
August 22, 2016 13:36
-
-
Save wafflespeanut/75a5eb286153bd06f7092ae1723d73b0 to your computer and use it in GitHub Desktop.
Viewport anomaly in Chrome!
This file contains 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> | |
| <head> | |
| <style type="text/css"> | |
| body { | |
| overflow: hidden; | |
| } | |
| .bubble { | |
| position: absolute; | |
| border-radius: 50%; | |
| transition: all 0.5s ease-out; | |
| opacity: 0.3; | |
| } | |
| .bubble-1 { | |
| width: 0.1vw; height: 0.1vw; | |
| } | |
| .bubble-2 { | |
| width: 1vw; height: 1vw; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| function bubble() { | |
| var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' | |
| + Math.floor(Math.random() * 255) + ',' | |
| + Math.floor(Math.random() * 255) + ')'; | |
| var x = Math.floor(Math.random() * window.innerWidth); | |
| var y = Math.floor(Math.random() * window.innerHeight); | |
| var timeout = 200; | |
| var bubble = document.createElement('div'); | |
| document.body.appendChild(bubble); | |
| bubble.style.backgroundColor = color; | |
| bubble.style.left = x + 'px'; | |
| bubble.style.top = y + 'px'; | |
| var selection = Math.ceil(Math.random() * 2); | |
| bubble.className = 'bubble bubble-' + selection; | |
| setTimeout(function() { | |
| bubble.style.transform = (selection == 1) ? 'scale(250)' : 'scale(100)'; | |
| }, timeout); | |
| timeout += 1000; | |
| setTimeout(function() { | |
| bubble.style.opacity = 0; | |
| }, timeout); | |
| timeout += 1000; | |
| setTimeout(function() { | |
| document.body.removeChild(bubble); | |
| }, timeout); | |
| } | |
| setInterval(bubble, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since
border-radiusis50%, the elements should be circles. While that's the case with Firefox, Chrome seems to show squares when the width and height is less than1vw. Moreover, Chrome seems to cheat a little bit. Whenever the element size increases dramatically, Chrome seems to rasterize the shape, which (I guess) should be the reason why it's kinda smooth in my machine, whereas Firefox somewhat struggles for making such transitions (since it's vectorifying stuff).