[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 418
  • Last Modified:

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...
0
oo7ml
Asked:
oo7ml
2 Solutions
 
Dan CraciunIT 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 WalkerWeb 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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now