html - Why is computed style in mobile safari differing from ruled style? -

html - Why is computed style in mobile safari differing from ruled style? -

i have iframe within popup reason in mobile safari 1 time iframe loads it's changing size of iframe go beyond screen dimensions , no matter in inspector computed style won't update.

the style inspector shows taking effect (and works everywhere else including android):

.gc-lightbox > iframe { background-color: #fff; height: 645px; width: 900px; position: relative; border: 4px solid rgba(255, 255, 255, 0.5); max-height: 90%; max-width: 90%; overflow: hidden; border: none; }

however, in mobile safari "computed height" , "computed width" way off (depending on popup initiate) they're high 3000px tall , 700px wide. inspector not have height: 900px or max-height: 90% crossed out , if set style="width: 300px !important; height: 300px !important" straight on iframe tag computed values still going past these values no indication why.

any clues?

click on of campus tour links (as said, works expected everywhere mobile safari - android) http://www.georgiancollege.ca/new-campus-tours/

in 1 of projects, safari computed rules not matching styles rules. , like, adding !important straight inline style did not help.

the culprit turned out many transition effects on page. transitions on inputs , textareas (which manipulated lot js). changing helped me out.

transition: none;

html ios css html5 css3