Slideshow effect problem, whole page flashes when image is changed

Joomla! 2.5.8 yootheme widgetkit slideshow

url: http://ilovemymqr.com/Newsite/Simplysalt/index.php

Just tested my site on ipad and iphone the slideshow at the top of the page (widgetkit) seems to make the whole page flash every time an image changes in the slideshow

i have slicedown effect also tried slice up, sliceupdown, fold, puzzle, boxes, boxes reverse etc.

These effects are ok Fade, slide, scroll, swipe,

Latest update:

I have taken all the css out of my theme and put it back one block at a time until the problem showed up, the below code creates the buttons eg contact us and order buttons in blue and when this code is put back in the screen flashes on ipad and iphone

Any ideas as i’m not too hot on css

/* Global Styles */
/* Button Style */
/Normal/
.ml-button-blue {
display: block;
width: 150px;
height: 45px;
border-radius: 4px;
text-align: center;
line-height: 45px;
text-decoration: none;
font-family: 'Helvetica';
font-weight: bold;
font-size: 16pt;
float: left;
margin: 10px 20px;
background-color: #80AFCC;
border: 1px solid #3082AB;
-moz-box-shadow:inset 0px 0px 1px rgba(61,150,185,1);
-webkit-box-shadow:inset 0px 0px 1px rgba(61,150,185,1);
box-shadow:inset 0px 0px 1px rgba(61,150,185,1);
background-image: -o-linear-gradient(90deg , rgb(125,169,190) 0%, rgb(174,217,241) 100%);
background-image: -moz-linear-gradient(90deg , rgb(125,169,190) 0%, rgb(174,217,241) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(125,169,190) 0%, rgb(174,217,241) 100%);
background-image: -ms-linear-gradient(90deg , rgb(125,169,190) 0%, rgb(174,217,241) 100%);
background-image: linear-gradient(90deg , rgb(125,169,190) 0%, rgb(174,217,241) 100%);
color: #135E83;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
}

Any ideas as i’m not too hot on css