{"action":"created","issue":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/5887","repository_url":"https://api.github.com/repos/webcompat/web-bugs","labels_url":"https://api.github.com/repos/webcompat/web-bugs/issues/5887/labels{/name}","comments_url":"https://api.github.com/repos/webcompat/web-bugs/issues/5887/comments","events_url":"https://api.github.com/repos/webcompat/web-bugs/issues/5887/events","html_url":"https://github.com/webcompat/web-bugs/issues/5887","id":222295495,"number":5887,"title":"www.bragi.com - text is not visible","user":{"login":"vthunder","id":435972,"avatar_url":"https://avatars0.githubusercontent.com/u/435972?v=3","gravatar_id":"","url":"https://api.github.com/users/vthunder","html_url":"https://github.com/vthunder","followers_url":"https://api.github.com/users/vthunder/followers","following_url":"https://api.github.com/users/vthunder/following{/other_user}","gists_url":"https://api.github.com/users/vthunder/gists{/gist_id}","starred_url":"https://api.github.com/users/vthunder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vthunder/subscriptions","organizations_url":"https://api.github.com/users/vthunder/orgs","repos_url":"https://api.github.com/users/vthunder/repos","events_url":"https://api.github.com/users/vthunder/events{/privacy}","received_events_url":"https://api.github.com/users/vthunder/received_events","type":"User","site_admin":false},"labels":[{"id":90471196,"url":"https://api.github.com/repos/webcompat/web-bugs/labels/browser-firefox","name":"browser-firefox","color":"FF4E00","default":false},{"id":388173951,"url":"https://api.github.com/repos/webcompat/web-bugs/labels/status-needstriage","name":"status-needstriage","color":"ff9900","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-04-18T04:03:14Z","updated_at":"2017-04-20T02:14:43Z","closed_at":null,"body":"<!-- @browser: Firefox 55.0 -->\n<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0 -->\n<!-- @reported_with: desktop-reporter -->\n\n**URL**: https://www.bragi.com/thedash/\n**Browser / Version**: Firefox 55.0\n**Operating System**: Mac OS X 10.12\n**Problem type**: Text is not visible\n\n**Steps to Reproduce**\n1. Navigate to: https://www.bragi.com/thedash/\r\n2. Scroll to text.\r\n\r\nExpected Behavior: Readable text.\r\n\r\nActual Behavior: Text folded on top of itself (?)\r\n\r\n\r\n![Screenshot Description](https://webcompat.com/uploads/2017/4/939ddad9-57b3-47a9-8b4c-74be5672ebf4.jpg)\n\n\n\n_From [webcompat.com](https://webcompat.com/) with ❤️_"},"comment":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/comments/295547804","html_url":"https://github.com/webcompat/web-bugs/issues/5887#issuecomment-295547804","issue_url":"https://api.github.com/repos/webcompat/web-bugs/issues/5887","id":295547804,"user":{"login":"karlcow","id":505230,"avatar_url":"https://avatars3.githubusercontent.com/u/505230?v=3","gravatar_id":"","url":"https://api.github.com/users/karlcow","html_url":"https://github.com/karlcow","followers_url":"https://api.github.com/users/karlcow/followers","following_url":"https://api.github.com/users/karlcow/following{/other_user}","gists_url":"https://api.github.com/users/karlcow/gists{/gist_id}","starred_url":"https://api.github.com/users/karlcow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karlcow/subscriptions","organizations_url":"https://api.github.com/users/karlcow/orgs","repos_url":"https://api.github.com/users/karlcow/repos","events_url":"https://api.github.com/users/karlcow/events{/privacy}","received_events_url":"https://api.github.com/users/karlcow/received_events","type":"User","site_admin":false},"created_at":"2017-04-20T02:14:43Z","updated_at":"2017-04-20T02:14:43Z","body":"ok there's is something weird happening.\r\n@MDTsai go down to The Whole World in Your Ears and resize the window viewport. You need a large screen. I can't reproduce exactly what @vthunder has but something weird in the way the images and text interact indeed.\r\n\r\nFor example on scrolling I get animation effects in Safari for the earbuds with lighting and rotation.\r\n\r\n![capture d ecran 2017-04-20 a 10 49 00](https://cloud.githubusercontent.com/assets/505230/25209579/09f805d8-25b7-11e7-90d0-e58ac90db95e.png)\r\n\r\nThere are issues with mixed content blocking for images served from unsecure places such as\r\nhttp://cdn.bragi.com/www/thedash/images/beInspired/get_inspired_running.jpg\r\n\r\nThere are also issues related to scrolling.\r\n\r\n```\r\n10:46:50:734 (ScrollMagic.Scene) -> WARNING: If the pinned element is positioned absolutely pushFollowers will be disabled.\r\n```\r\n\r\nPerformance wise they have pretty heavy  stuff.\r\n\r\n```css\r\n@media (min-width:992px) and (max-width:1950px) {\r\n    .headlineBlock {\r\n        margin-bottom: calc((39px + 18 * (100vw - 992px) / (1950 - 992)) * .6)\r\n    }\r\n}\r\n```\r\n\r\nThe animation light effect is done with an image sprite which is translated when scrolling\r\nhttps://cdn.bragi.com/www/2016/10/28141427/Dash_Floating_sprite_part1.jpg\r\n\r\n```html\r\n<img id=\"wholeWorldImage1\" \r\n          alt=\"Exploding Dash\" \r\n          src=\"https://cdn.bragi.com/www/2016/10/28141427/Dash_Floating_sprite_part1.jpg\" \r\n          style=\"display: block; top: -1205vh;\">\r\n```\r\n\r\nThe value of top is being changed when scrolling.\r\n\r\n```css\r\n@media all {\r\n    .wholeWorldContainer #wholeWorldImage1, .wholeWorldContainer #wholeWorldImage2 {\r\n        position: absolute;\r\n        overflow: hidden;\r\n        top: 5vh;\r\n        z-index: -1;\r\n        -webkit-transform: translate(-50%, -50%);\r\n        -moz-transform: translate(-50%, -50%);\r\n        -ms-transform: translate(-50%, -50%);\r\n        -o-transform: translate(-50%, -50%);\r\n        transform: translate(-50%, -50%);\r\n        height: 1305vh;\r\n        right: 0;\r\n        transform: translate3d(0, 0, 0);\r\n    }\r\n}\r\n```\r\n\r\nThe scroll is controlled by\r\nhttps://cdn.bragi.com/www/assets/themes/bragi/20170418081824/assets/dist/js/thedash.min.js\r\n\r\nand starts with\r\n\r\n```js\r\nvar $ = jQuery = require('jquery'),\r\nScrollMagic = require('scrollmagic'),\r\ngsap = require('gsap');\r\nslick = require('slick-carousel'),\r\nwindow.addEventListener('mousewheel', function (e) {\r\n  wDelta = e.wheelDelta < 0 ? 'down' : 'up'\r\n});\r\nvar wholeWorldIsSet = !1;\r\n\r\n// cutting stuff\r\n\r\n  function t() {\r\n    r = new ScrollMagic.Controller,\r\n    e();\r\n    var t = [\r\n      '5',\r\n      '105',\r\n      '205',\r\n      '305',\r\n      '405',\r\n      '505',\r\n      '605',\r\n      '705',\r\n      '805',\r\n      '905'\r\n    ],\r\n    o = {\r\n      curImg: 0\r\n    },\r\n    a = TweenMax.to(o, 0.5, {\r\n      curImg: t.length - 1,\r\n      roundProps: 'curImg',\r\n      immediateRender: !0,\r\n      ease: Linear.easeNone,\r\n      onUpdate: function () {\r\n        $('#wholeWorldImage1').attr('src').indexOf('part1') && $('#wholeWorldImage1').css('display', 'none'),\r\n        $('#wholeWorldImage2').css('top', '-' + t[o.curImg] + 'vh')\r\n      }\r\n    }),\r\n\r\n```\r\n\r\nThere are two instances of this and it doesn't work in Firefox."}}
{"actor":{"display_login":"karlcow"}}