developer.apple.com/search result page blurry with experimental web platform features on |
|||||||
Issue descriptionThis is spun off of https://bugs.chromium.org/p/chromium/issues/detail?id=412945#c43 Steps to reproduce: 1. Run Chrome canary (53.0.2751.0 (Official Build) canary (64 bit) on mac) 2. Turn on "experimental-web-platform-features" in chrome://flags 3. Visit https://developer.apple.com/search and search something (e.g. "threading") 4. See results (see the attachment) The results shown are rendered blurry text, although you can click or select on those.
,
May 31 2016
Confirmed with Android (Beta with experimental web platform flag on) and Windows8 (Canary with experimental web platform flag on). On Linux (ToT with developer build) the page is rendered almost in black, but it seems some other compositor/OpenGL issue was happening. Given above testing, setting OS to ALL. Thanks phistuck@ for looking in detail.
,
Jun 1 2016
Over to compositing team for position:sticky.
,
Jun 2 2016
,
Jun 2 2016
This looks a lot like a backdrop blur to me. I've also verified that this is caused by the blur by connecting with dev tools and finding the offending style. Removing backdrop-filter: blur(8px) from #search .shadow-box fixed the problem.
,
Jul 19 2016
I am unable to repro this on Linux (ToT) and Mac Retina (canary). Let me know if you are still seeing it.
,
Jul 19 2016
I am unable to reproduce, either. I'm not sure the problem was fixed by the page (developer.apple.com) or Chrome's experimental web platform features, but as it is not able to reproduce, let me close this. Theoretically I can bisect to see at which point the problem is magically fixed, but as this is "experimental" feature, I don't want to spend much time on it - unless it is really important/necessary. Feel free to reassign to me if you think it is important, or feel free to take this :)
,
Apr 5 2017
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by phistuck@chromium.org
, May 31 2016I think it is either backdrop-filter, or sticky positioning (likely the latter), since both of them are enabled by the Experimental web platform features flag and both of them are used on the same element - <section class="sticky divider-top bg-light" ng-show="results.length && !loading"> #search .sticky { position: relative; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; // A suspect. top: 0px !important; z-index: 9; opacity: 0.92; backdrop-filter: blur(22.08px); // A suspect. z-index: 2 !important; }