Home/ Questions/Q 8715985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:58:16+00:00

Example website So when you mouseover the projects you should see an rgba background

  • 0

Example website

So when you mouseover the projects you should see an rgba background fade in with some text over the existing image. I cannot duplicate the error in Safari or in Firefox. In fact, I cannot duplicate this for the same ones every time, and I can also say that refreshing the page will not necessarily fix the problem either.

Is this a problem in my code or have we come upon a problem with Webkit and/or Chrome specifically?

UPDATE 1

Originally I thought this was a problem with the RGBA background so I tried using a background: black; to see if it changed anything. This didn’t work seeing as the line was still present on mouseover.

UPDATE 2

I have considered this to be a problem due to the display I’ve been using. I’m on the new Macbook Pro with retina display. This could still be the source of the issue, but I’m not convinced it is. I’m yet to do testing myself on another device that isn’t a retina display, but I’ve been told that the lines are still prevalent.

This image will help:

Here's a fun image description!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s something about your box-model that I don’t like for this technique. I’ve used similar hover/fade scripts, but never utilized a negative margin (because it will jack up the box-model), or made the top layer larger than the bottom.

    I found a few things that helped it render better for me (I’m wasn’t seeing lines, but I was seeing either rounded white corners peaking out or black chisel points in the parent corners). At any rate, here’s the few things:

    1. Nix the -1% 0 0 -1% margin (making something 102% wide, then using a -1% margin seems like 100% to me, but relies on all browsers rendering that math the same).
    2. Set the parent and child to be the same W x H (200px x 410px)
    3. Decreasing the radius of the child by one px hid the oddities of the corners for me (again, I think it’s a rendering engine thing FWIW); though not having it set should do the job.
    4. I also add .projectItem a:hover to the .projectItem a‘s CSS declaration, to allow just the transitions to occur on .projectItem a:hover.

    This fiddle does the roll-over effect with all the features above added/removed respectively: http://jsfiddle.net/hd4QM/

    HTH.

    • 0