CODEWITHSUNDEEP
csssafari
user1743227
user1743227

Reputation:

Absolute positioning messed up in Safari

I tried to do a mouseover fade effect with jQuery. The idea is to have two images positioned on top of each other in this way. 

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

It works well with Chrome. Screenshot ( http://cl.ly/image/0f3M0f2q1t2S )

However, i am having this issue with Safari ( http://cl.ly/image/44290O3n1X0b )

You can see both images when the page loads even though, the grayscale one should appear on top of the coloured one and hides the latter.

Suggestions?

Upvotes: 2

Views: 20700

Answers (4)

Methodician
Methodician

Reputation: 2506

My problem was a little different, but the solution was to add position: relative; to the parent element (and in my case, height: 100%) and this made Chrome and Safari behave the same.

Upvotes: 2

Pedro Rabbi
Pedro Rabbi

Reputation: 391

This did the trick for me in a similar challenge:

position: absolute;
top: 8px;
margin-left: 14px;

Upvotes: 1

Andreea Scutaru
Andreea Scutaru

Reputation: 71

I also had some problems (only with Safari) with an element that had absolute positioning. I fixed the issue by specifying the left and right properties:

.element{
  position:absolute;
  left:0;
  right:0;
}

Upvotes: 7

nbrooks
nbrooks

Reputation: 18233

HTML

<img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

JS

$('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

CSS

.img-circle {
    position: absolute;
    top: ???;
    left: ???;
}

Upvotes: 0

Related Questions