Line Appearing in Google Chrome

Hi,

There is a small line appearing on a section of my page that i just can't seem to debug - http://goo.gl/ji6QQJ

If you scroll down to the 'Shop Locally Globally' section and look at the bottom of this section close to the 'Up & Down' arrows, you will see a small thin white line above them (see screenshot).

screenshot
It only appears in Chrome, and it only appears if i add the 'Up & Down' arrows to the section above it.

Can anyone see why this is happening? Thanks in advance...
oo7mlAsked:
Who is Participating?
 
Dan CraciunConnect With a Mentor IT ConsultantCommented:
It disappears if you set
padding-bottom: 6.4rem;

Open in new window

instead of 6.5 on .home-section

Line 442 in template.css

HTH,
Dan
0
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
It seems that Chrome is having trouble rendering the exactly one-half pixel resulting from the rem unit. Chrome is calculating 6.5rem as 123.500 pixels. While 6.49rem or 6.51rem are rounded and rendered properly, 6.5 is not.

I wonder if the rem unit is ready for prime time. I noticed that Firefox calculates 1rem as 19px while Chrome calculates it as 17px. It might be wise to include the following in order to standardize the root em size across browsers. (Replace "XX" with your preferred root font-size in pixels).
:root { font-size: XXpx; }

Open in new window

0
 
oo7mlAuthor Commented:
Thanks guys, i changed it to 6.4 and it worked fine, thanks for insight into how Chrome renders it too, much appreciated.
0
All Courses

From novice to tech pro — start learning today.