# Pseudo class active not working in Safari



## christinewulfit (Apr 30, 2016)

Hello all, just wondering why these images in the categories of 'Papier Peint' 'Murales' 'Peinture' will not enlarge when clicked on. I have put a pseudo class of active to trigger this. Works fine in Firefox and Chrome.
http://www.ldeco.ca/


----------



## JiminSA (Dec 15, 2011)

There was a problem with Safari, whereby Bootstrap Modal which did not contain href="#", would not pop up. It could be that the problem still exists in your version. I suggest that you change your modal link from:

```
[URL=#papierpeint][IMG alt="Ldeco"]img/realpaper.jpg[/IMG][/URL]
```
to:

```
[URL=#papierpeint][IMG alt="Ldeco"]img/realpaper.jpg[/IMG][/URL]
```
... and see how it behaves


----------



## christinewulfit (Apr 30, 2016)

Hello again JiminSA and thanks for your quick reply. I should have been more clear. Once in the 'Papier Peint' category, there are some pictures that I want to enlarge on :hover or :active, works fine in Firefox and Chrome but not Safari.


----------



## JiminSA (Dec 15, 2011)

No problem ...
It's your transition declarations in the modern-business.css stylesheet, which need to be prefixed by '-webkit-'
From:

```
.grow {
    transition: all .4s ease-in-out;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
}
```
To:

```
.grow {
    -webkit-transition: all .4s ease-in-out;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}
```


----------



## christinewulfit (Apr 30, 2016)

Hi, made those changes, still does not appear be working.


----------



## JiminSA (Dec 15, 2011)

I guess you just tested it locally - any chance you could put the amended css up on the site?


----------



## christinewulfit (Apr 30, 2016)

Sorry, I thought I did, its up now


----------



## JiminSA (Dec 15, 2011)

Yes, I see the change and the fact that it still doesn't work Will investigate further ...


----------



## christinewulfit (Apr 30, 2016)

Okay thank you JiminSA


----------



## JiminSA (Dec 15, 2011)

I wonder if we took out the redundant code, things may change?

```
.grow {
    -webkit-transition: all .4s ease-in-out;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}
```
will become

```
.grow {
    -webkit-transition: all .4s ease-in-out;
}
```
 maybe it's confusing Safari somehow (I'm clutching at straws, I know, but that's the way I roll)


----------



## christinewulfit (Apr 30, 2016)

yes I took it out, does not seem to make a difference. Safari is so picky, eh?


----------



## JiminSA (Dec 15, 2011)

Try this ...

```
-webkit-transition: -webkit-transform 400ms ease-in-out;
```


----------



## christinewulfit (Apr 30, 2016)

Yes I tried that and have uploaded the amended css, have a look at the error message I received when I inspected the element in Safari.


----------



## JiminSA (Dec 15, 2011)

Sorry that suggestion was totally off!
I wonder how it would perform if you took out the grow and just had the thumbnailaaa class active? i.e. change this ...

```
[IMG]img/peintureescalier.jpg[/IMG]
```
to this

```
[IMG]img/peintureescalier.jpg[/IMG]
```


----------



## christinewulfit (Apr 30, 2016)

Hey JiminSA I got it. Or perhaps you suggested it already - because I only adjusted the .grow class and not the 2 pseudos with the addition of 'webkit'
.grow {

-webkit-transition: -webkit-transform 400ms ease-in-out;

}
img.grow:hover { -webkit-transform: scale(2.1); }
img.grow:active { -webkit-transform:transform: scale(2.1); } I will upload amended CSS. You are a great help! Thank you for all your time once again.


----------



## JiminSA (Dec 15, 2011)

Nicely done Christine and Yes, you got it because you spotted the need to alter the pseudos! We might eventually have gotten there with my floundering, but credit where credits's due


----------



## JiminSA (Dec 15, 2011)

Wouldn't you like to mark this thread solved?


----------

