{"url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/23","repository_url":"https://api.github.com/repos/empress/empress-blog-casper-template","labels_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/23/comments","events_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/23/events","html_url":"https://github.com/empress/empress-blog-casper-template/pull/23","id":440533760,"node_id":"MDExOlB1bGxSZXF1ZXN0Mjc2MDU3MTE4","number":23,"title":"Fix Safari render/paint loop","user":{"login":"happycollision","id":3663628,"node_id":"MDQ6VXNlcjM2NjM2Mjg=","avatar_url":"https://avatars0.githubusercontent.com/u/3663628?v=4","gravatar_id":"","url":"https://api.github.com/users/happycollision","html_url":"https://github.com/happycollision","followers_url":"https://api.github.com/users/happycollision/followers","following_url":"https://api.github.com/users/happycollision/following{/other_user}","gists_url":"https://api.github.com/users/happycollision/gists{/gist_id}","starred_url":"https://api.github.com/users/happycollision/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/happycollision/subscriptions","organizations_url":"https://api.github.com/users/happycollision/orgs","repos_url":"https://api.github.com/users/happycollision/repos","events_url":"https://api.github.com/users/happycollision/events{/privacy}","received_events_url":"https://api.github.com/users/happycollision/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2019-05-06T04:10:48Z","updated_at":"2019-07-29T19:44:51Z","closed_at":null,"author_association":"FIRST_TIME_CONTRIBUTOR","active_lock_reason":null,"pull_request":{"url":"https://api.github.com/repos/empress/empress-blog-casper-template/pulls/23","html_url":"https://github.com/empress/empress-blog-casper-template/pull/23","diff_url":"https://github.com/empress/empress-blog-casper-template/pull/23.diff","patch_url":"https://github.com/empress/empress-blog-casper-template/pull/23.patch"},"body":"Fix Safari render/paint loop\r\n\r\n**What:**\r\n\r\nAs identified in [this bug\r\nreport](https://bugs.webkit.org/show_bug.cgi?id=194332) with additional\r\ncomments clarifying my findings hopefully soon to appear, there is a bug\r\nin Safari that starts and endless cycle of render/paints when all the\r\nfollowing conditions are met:\r\n\r\n1. a `transition` animation is defined that is not instantaneous\r\n2. In the destination of the transition, an animating property contains\r\n   a color value with:\r\n    1. an alpha channel that is *exclusively* between 0 and 1\r\n    2. at least one color channel which is *exclusively* between 0 and 255\r\n\r\nThese conditions represent my current best guess at the exact\r\nrequirements to encounter this bug.\r\n\r\nYou can explore the bug in this fiddle I made while trying to pinpoint\r\nthe minimum reproduction: https://jsfiddle.net/0ph9xkrt/7/\r\n\r\nThe bug described above affects this template only on the `.post-card`\r\nclass. All other animations (that I am aware of and have tested)\r\ninvolving an element with an `rgba` color in one of its properties do\r\nnot directly animate the property containing the color, and are thus not\r\ntriggering this bug.\r\n\r\n**How:**\r\n\r\nThere are three ways we can avoid the bug for the hover animation of\r\n`.post-card`s in this template. One, we could just alter the shadow's\r\ncolor to be a pure black (nullifying condition 2.ii) and then compensate\r\nthe darker color with a slightly more transparent alpha channel. Two, we\r\ncould use the actual design colors (which actually contain a hint of\r\ncolor) but skip animating the distance/blur of the shadow which means we\r\ndo not have to animate a property containing the color (nullifying\r\ncondition 2). Or three, we can use pseudo-selectors to define `:before`\r\nand `:after` with each representing one state for the box shadow, then\r\nanimate only the opacity between the two (also nullifying condition 2).\r\n\r\nThis third option was the choice here since it will keep the design of\r\nthe site as is, visually, without compromising the color of the shadow\r\nor the changable size of the shadow. It does have one drawback that the\r\nother two options do not: the css is much more complex, as you'll see in\r\nthe diff.","closed_by":null,"performed_via_github_app":null}