Iphone Safari browser do not show page content properly

HTML & CSS
1

On Android I don#t have any problems with showing boxes with content inside but once I have tried to view web page on Iphone I can’t see text inside the boxes for some reason (boxes with hover text in references section). What might be wrong with the code? I use quite a lot of overrides because this is customized feature. I have tried different variations but it looks like my CSS is not fully compatible with Iphones Safari?

    .hover03
    {
      height: 100%;
      width: 100%;
    
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    
    }
    .hover03:hover
    {
    	 transform: scale(1.2);
    	 transform-origin: center;
    }
    .hover02 .sppb-cta-title{
    	color: transparent !important;
    }
    .hover03:hover .sppb-cta-title{	
      color: #ffffff !important;
      animation:fadeIn ease-in 1;
      animation-fill-mode:forwards;
      animation-duration:1s;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .hover02 .sppb-btn-default{
    	color: transparent !important;
    	background-color: transparent !important;
    	border: transparent !important;
    	font-size: 14px !important;
    }
    .hover03:hover .sppb-btn-default{
    	color: #fff !important;
    	background-color: #620376 !important;
    	  opacity:0; 		
      animation:fadeIn ease-in 1;
      animation-fill-mode:forwards;
      animation-duration:1s;
        font-size: 14px !important;
    }
    .hover03:hover .sppb-btn-default:hover{
    	color: #fff !important;
    	background-color: #D46B0A !important;
    	font-size: 14x !important;
    }
2

Try adding cursor:pointer to the normal (non hovered) rule.

i.e.

.hover03 {cursor:pointer}

It can be awkward trying to get hover effects on a touch device so if the above doesn’t work you would be better off using some js to toggle a class on touch/click.

1 Like
3

Thank you for reply! Is it possible to remove we blink from my post as I do not want Google to index this page by searching for this weblink.
Thank you!

4

No need for concern. External links in the forum are rel="nofollow"

5

.hover03 {cursor:pointer}

this one does not work. I am thinking that text with button can be always visible on mobile. Should it be then something like:

@media screen and (min-width:768px){ 
.hover02 .sppb-cta-title{
color: #fff !important;
} 
.hover03 .sppb-cta-title{
      color: #ffffff !important;
      background-color: rgba(0, 0, 0, 0.5);
}
    .hover02 .sppb-btn-default{
    	color: #fff !important;
    	background-color: #fff !important;
    	border: transparent !important;
    	font-size: 14px !important;
    }
}
6

I don’t see that you have added my code.

I can confirm that when I inject that rule into your live page with devtools and view in my iphone5s that it works to display the text and button. Of course the fact that it works in devtools is not 100% reliable but usually means that it will work at source.

Can you try adding my code and let me know when you have added it and I will re-test? (You may not have cleared cache etc).

No you would need to use max-width instead of min-width in your media query. min-width targets devices greater than that min-width.


@media screen and (max-width:768px){ 
.hover02 .sppb-cta-title{
color: #fff !important;
} 
.hover03 .sppb-cta-title{
      color: #ffffff !important;
      background-color: rgba(0, 0, 0, 0.5);
}
    .hover02 .sppb-btn-default{
    	color: #fff !important;
    	background-color: #fff !important;
    	border: transparent !important;
    	font-size: 14px !important;
    }
}

Of course that doesn’t solve the problem for touch devices bigger than 768px (e,g, tablets, ipads , laptops or even some desktops).

When hover is providing important information you should display the information by default to all devices. You can then use js to detect if the device is not a touch device and then enhance with your hover effects.

You could also try the hover media query but I’m not sure how reliable it is.

e.g.

http://www.pmob.co.uk/temp2/hover-none.html

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.