round image with position fixed - css

Question

I am trying to get round images in both chrome and mozilla with position fixed but it somehow fails in chrome.

Here is my css :-

.circular{

    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
    border: 5px solid white;
    overflow: hidden;
    position: fixed;
    height: 100px;
    width: 100px;
    left: 80px;
    top: 20px;
}

Here is my html :-

 <div class='circular'>
              <div class='round-image'>
                <img alt="Portfolio_page" src="/assets/portfolio_page.png" />
              </div>
            </div>

This is the two result in chrome and mozilla :- mozilla view chrome view

It was appearing properly till I did not put position: fixed and give a specific height and width

On a Vista system goto "C:\Program Files\Google\Chrome\Application" and right click on Chrome application then Properties a window should open then click on Details - you should now be able to see the version — Malcolm, Jul 20 '13 at 14:42
Just a thought, if you are using the same version as myself and Sourabh (v28) try clearing your browser cache and see if it helps. — Malcolm, Jul 20 '13 at 15:04
@Malcom you can also view the Chrome version by clicking on the menu and selecting "About Google Chrome". :-) — James Donnelly, Jul 20 '13 at 15:09
I don't know what's wrong with mine, is there a diff between chrome and chromium? — Dev R, Jul 20 '13 at 17:18
I have never used Chromium. http://en.wikipedia.org/wiki/Chromium_%28web_browser%29 but it could be your problem as the article says there are some minor differences I am not 100% sure. — Malcolm, Jul 20 '13 at 17:39

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

try adding:

.circular img {
    position: static;
}

if that doesn't work:

.circular{
    -webkit-transform: translateZ(0);
}

i noticed that i could get the same problem if the img was position: fixed. maybe it's somehow inheriting position on the windows version of chrome. the transform can force a repaint which might also fix it

credit for the transform idea: Chrome rendering issue. Fixed position anchor with UL in body

edited May 23 '17 at 12:21

Community

1
1

answered Jul 20 '13 at 19:21

Sterling Camden

493
3
7

Arg.. Worth a try.. Maybe try the transform on the img itself or as a long shot try zindex : -1 on the img – Sterling Camden Jul 21 '13 at 20:24

round image with position fixed - css

1 Answers1