From 07dbc545ac084a6e2b575727fa82038f7f65ff8e Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Thu, 23 Jul 2015 11:52:32 +0200 Subject: [PATCH] :bug: Use `border-box` to prevent losing subpixel AA When highlights are positioned outside the line box, they could get hidden by a subsequent tile (because of its opaque background). As a result, subpixel anti-aliasing gets disabled by Chrome. Using `border-box` as the default `boxSizing` allows highlights to always fit within the line (except if a styling like `margin` is applied). --- src/highlights-component.coffee | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee index 5e364f90c..522dcb304 100644 --- a/src/highlights-component.coffee +++ b/src/highlights-component.coffee @@ -76,6 +76,10 @@ class HighlightsComponent unless oldHighlightState.regions[i]? oldHighlightState.regions[i] = {} regionNode = document.createElement('div') + # This prevents highlights at the tiles boundaries to be hidden by the + # subsequent tile. When this happens, subpixel anti-aliasing gets + # disabled. + regionNode.style.boxSizing = "border-box" regionNode.classList.add('region') regionNode.classList.add(newHighlightState.deprecatedRegionClass) if newHighlightState.deprecatedRegionClass? @regionNodesByHighlightId[id][i] = regionNode