Gaps/anti-aliasing issues between 3D transformed elements
Reported by
em...@ryanwilliams.co.uk,
Apr 17 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15 Steps to reproduce the problem: 1. Create a number of elements next to each other with same background colour 2. 3D transform them What is the expected behavior? Elements should appear flush and as a single surface of colour. What went wrong? There are gaps between each element. Did this work before? N/A Does this work in other browsers? No Behaviour seems very similar in Safari v11.1, but only when zoomed in. Chrome version: Google Chrome 65.0.3325.181 (Official Build) (64-bit) Revision dc3469be277cc962ba01d9c0cb5bb1a265676c36-refs/branch-heads/3325@{#725} OS Mac OS X JavaScript V8 6.5.254.41 Flash 29.0.0.140 /Users/ryanwilliams/Library/Application Support/Google/Chrome/PepperFlash/29.0.0.140/PepperFlashPlayer.plugin User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Command Line /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --flag-switches-begin --enable-devtools-experiments --flag-switches-end Executable Path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome Profile Path /Users/ryanwilliams/Library/Application Support/Google/Chrome/Profile 2 Variations bd23585d-3f4a17df c134752e-b8b72c88 a6674cf-ca7d8d80 3095aa95-3f4a17df d52c4ff7-d52c4ff7 47e5d3db-3d47f4f4 4dc30737-b8a5ea08 7a7966ef-7a7966ef 34d450b1-3f4a17df f9884634-659882c0 121ae2bc-ca7d8d80 57f575bb-3d47f4f4 120703dd-3f4a17df f347910c-3f4a17df 4b61504a-c9eb6633 9773d3bd-f23d1dea 8e3b2dc5-93702590 9e5c75f1-337acadb c322f799-2dbe5f9 3de1fbf2-3f4a17df f79cb77b-3d47f4f4 4ea303a6-ecbb250e 2b33233e-d8253d6f 72606c4f-3f4a17df 58a025e3-c2b41702 1bced4a3-90fa85cd b2f0086-d6b26420 2d871858-3f4a17df 4bc337ce-69465896 9a2f4e5b-d226bfeb 494d8760-52325d43 f47ae82a-86f22ee5 3ac60855-486e2a9c f296190c-cdc3d902 4442aae2-6bdfffe7 ed1d377-e1cc0f14 12e17bc5-e1cc0f14 75f0f0a0-6bdfffe7 e2b18481-3a9ae350 e7e71889-4ad60575 34baa302-d25ea691 f5fff3a2-ca7d8d80 98426e68-ca7d8d80 94e68624-803f8fc4 da4aaa01-4d2fac87 Channel: stable OS Version: OS X 10.13.4 Flash Version: It's possible to somewhat mitigate the issue by setting backface-visibility: hidden and applying an outline matching the background colour, however this incurs a significant performance hit.
,
Apr 17 2018
,
Apr 17 2018
Not present on linux or Windows as far as I can tell, so Mac specific.
,
Apr 18 2018
,
Apr 18 2018
Able to reproduce issue on reported version 65.0.3325.181, on latest stable 66.0.3359.117 and on latest canary 68.0.3398.0 using Mac Retina 10.13.1 only. NOTE: Issue is not seen in Non-Retina, Linux and Windows. Issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. Thanks!
,
Apr 20 2018
This is a know issue with how anti-aliasing is done for 3D transformed layers. There's no simple fix for it except turning off AA.
,
Apr 23 2018
From a web developer perspective, the only effective workaround I've found is setting a negative margin (e.g. -0.5px). Using a small outline works too but causes substantial performance loss. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by em...@ryanwilliams.co.uk
, Apr 17 2018