wrong borders' width in android browser

Issue

On android devices with high density screens (devicePixelRatio of 1.5) the borders of html elements have wrong border width.

The two boxes here: jsbin sample, appear correctly on the desktop

but on the android - both in chrome and the stack browser - they look like this:

now i understand why they look like this, but i cannot find any CSS solution - only js.

the js solution would be to change the width and height of the elements to be odd as well as the top/left properties.

Solution

There is no standard solution, too bad.
You can make the next tricks to avoid an inconsistent displaying of borders with 1px width.

• make colour of borders slightly transparent, i.e. with alpha <= 0.5. For example border-color: rgba(169, 0, 52, 0.5) I tested this on Android 4.4.2 Chrome & Yabrowser browsers. Works fine!;

• make width/height of bordered element odd, and shift element position. Here you need to experiment and use JS, saying like:

  $('div.elemWithBadBorders').each(function(){
      var $el = $(this);
      var width = $el.width();
      if(width % 2 == 0){
          $el.css('width', (width+1)+'px');
      }
  });
  

• Disable borders if showed on Retina displays or other hires screens. You need to use media query in css like this:

   @media (-webkit-min-device-pixel-ratio: 1.5) {
      div.elemWithBadBorders {
          border: none;
      }
   }
  

  where 1.5 is pixel density. On Retina displays it appears as 2
  

Answered By - Yan Pak