How to resize reCaptcha popup image?

HTML & CSS
35

:slight_smile: quote=“sashaiel, post:34, topic:409002”]
I actually didn’t remove right:0 ;
[/quote]

I believe its the right:-999em that causes the wide scroll problem on the iphone.(It doesn’t show the problem on desktop or in the device toggle in devtools)

You use the same method for your search input so i would try something like this as a test.

/* Add/modify this in the max-width 719px media query that contains these rules*/
#header #search .search-inner {
    width: 200px;
    border-radius: 0 0 0 3px;
    /*right: -999em;*/
    right:auto;
    left:-100vw;
    position: relative;
    margin-top: 0;
    box-shadow: -1px 2px 2px rgba(0,0,0,.4);
}

I changed the right:-999em to left -100vw and the right to right:auto. This will stop the iphone scrolling right forever with any luck although the menu code may indeed also have to be looked at afterwards to see if the same issue is occurring there.

I’m not due back into the country until 6thg April and unfortunately I do not have a mac computer out here to test. The only way to test an iphone is to plug it into the usb on the mac and then devtools become available in Safari so you can actually test the results live on the phone.

I see two areas of concern. 1) The iScroll is using transform :translate to provide the scroll effect and it seems to be getting it wrong in the iframe.

  1. I believe you have an iframe resizer js routine in your scripts (although I couldn’t find it) and what this does is it sets a physical height to the iframe to match its contents. You can see this in action if you look at the iframe tag and you will see that a height:attribute is dynamically added, This allows the iframe to scroll inside an overflow container. However when you click the captcha and the big image pops up I don;t think there’s anything watching that can modify the iframe height to match the new height. This doesn’t seem to be an issue to the captcha itself but would occur should you open any extra content in that iframe.

Therefore it seems you have a chain of events that occur when the captcha opens. You want the iframe to be resized to the new height and then you want the iScroll to work on the new content. I believe this is where things fail as they need to work together but are independent systems.

That’s why I was hoping you could run a test and stop the iScroll Js and css from being seen and then see if things are still broken or not.:slight_smile:

1 Like