Skip to content

Fixes half pixel borders on story desktop.#24050

Merged
gmajoulet merged 1 commit intoampproject:masterfrom
gmajoulet:half_pixel_border
Aug 20, 2019
Merged

Fixes half pixel borders on story desktop.#24050
gmajoulet merged 1 commit intoampproject:masterfrom
gmajoulet:half_pixel_border

Conversation

@gmajoulet
Copy link
Copy Markdown
Contributor

Some CSS transforms like a translate using % based value, or scale, can end up displaying blurry half pixel borders (see attached issue).
There are many hacks available to work around it, like backface-visibility for translate properties, or using JavaScript to compute a rounded number of pixels. However, the only one I found that works with both scale and translate is this perspective property.

It doesn't seem to affect GPU memory usage and fixes the issue across browsers.

Fixes #16626

Copy link
Copy Markdown
Contributor

@newmuis newmuis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not 100% sure but won't this cause the browser to put these into new layers? So theoretically there will be some performance hit?

Not sure if they still have it, but Firefox used to have a 3d view to visualize layers in their developer tools; maybe we can check that?

@gmajoulet
Copy link
Copy Markdown
Contributor Author

They were already in new layers because of the translateZ(0), so that should be a no-op :))

@gmajoulet
Copy link
Copy Markdown
Contributor Author

Sorry, there's no translateZ but they're already in their own layers (screenshot without the fix):

image

Copy link
Copy Markdown
Contributor

@newmuis newmuis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, was just looking at the diff and didn't see anything on Z. Should have known that there were a million more styles 😂

@gmajoulet gmajoulet merged commit c3d9229 into ampproject:master Aug 20, 2019
westonruter added a commit to westonruter/amphtml that referenced this pull request Aug 20, 2019
* 'master' of github.com:ampproject/amphtml: (32 commits)
  ✨ Make tweet id a bindable attribute (ampproject#23953)
  🏗 Update Local AMP extension to allow custom base URLs (ampproject#24029)
  🏗 Improve serving from non-localhost host (ampproject#24066)
  Preventing half pixels. (ampproject#24050)
  Update callout-vendors.js (ampproject#23218)
  🏗 Fixes to `check-package-manager.js` (ampproject#24060)
  Rename AMP_MODE to __AMP_MODE. (ampproject#24052)
  Story media performance metrics. (ampproject#23962)
  Updating Story amp-sidebar width documentation. (ampproject#23894)
  Fixes race condition in amp-video-iframe (ampproject#24033)
  Rename ampExtendedElements to __AMP_EXTENDED_ELEMENTS (ampproject#24056)
  🏗🚮 Enable property inlining (ampproject#24053)
  ✨amp-ads: Added optional params for Directadvert network (ampproject#23724)
  <amp-experiment> style mutation fix and improvment (ampproject#23669)
  🐛 Allow http protocol for noscript > img fallbacks for parity with amp-img (ampproject#21686)
  🏗 Refactor transform-log-asserts (ampproject#24028)
  Automatically preconnect to source origins on page loads. (ampproject#24045)
  Support visibility API in the ampdoc (ampproject#23799)
  Amphtml visual tests should use relative path against root (ampproject#24042)
  FIX: check all fields' dirtiness on AMP form init (ampproject#23978)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unwanted border around amp-story-page in desktop view

4 participants