It appears to be on different browsers, not just FF… I cannot figure out WHY Im getting these ghosted white line around the corners. Ive checked the background to make sure its black… so its not like white is bleeding through…
.has-hover .bg, .has-hover [class*=“image-”]{
border-radius: 25px;
box-shadow:
inset -20px 30px 20px -10px #000000, /* COLOR BLACK /
inset 20px -30px 20px -10px #000000;/ COLOR BLACK */
}
It’s a common problem with border-radius which sometimes can’t be solved completely.
For best results I would do it like this.
Box-shadow inset does not show when applied directly to the image as the shadow is on the image’s background but the image itself is covering the background (use a broken url and you will see the inset take affect).
Therefore I assume your box shadow is applied to a separate element that is shimmed over the top of the image as in my example. To get rid of the pixelation I put border-radius on the image container and on the image itself and then shimmed the inset shadow on top of the image using a pseudo element. Lastly, and importantly I gave the image a border color to match the background and the combination of these things gives the best result. The image container also needs overflow:hidden to crop the image properly.
Thanks!
I looked through the page and this part of the web page is controlled by a UX Builder. The images are loaded on the back end and dynamically loaded on page load. I cannot actually alter the image itself only the container. Thanks. I guess I can live with it…
If you have a link to the site in question I can take a look and see if there’s anything that can be done via the css alone?
Give me about 10 minutes… I have been parsing out the css per page. Let me load the one for this page…
ok I loaded the About css… thanks.
Sorry, I went to bed :).
I am around later this morning and will take a look if the site is still available.
No problem I opened it up again. Thanks.
I managed to look at it before it went offline again but I couldn’t see an easy fix I’m afraid. 
There were a lot of nested elements and the images were background images rather than foreground images so it was quite hard to debug on the fly. I’m pretty sure there would be a solution but it may be difficult with all the nested elements.
The stray pixels didn’t really look that obvious to me though and I’m not sure most people would notice.
Thanks! Thats what I was thinking. The UX Builder which is built into the site basically pushes the image into a container. No worries. Thanks again!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
