You should test the captcha on that stand alone page and see if its working ok. It seems you are injecting JS and css into that page and that is way beyond my scope.
Hi Paul,
I hope you have a good times wherever you travel.
When we open articles in a new page (without popup) as mentioned above, everything works fine.
The problem only occurs when we use popup to view articles.
In addition, I should also mention that everything seems to work well in the pop-up display until we change the display status to mobile phone.
If we make the browser screen size on the computer even smaller than the mobile screen size, everything still works fine!
But when we change the display mode to mobile, this problem appears. In fact, this problem of empty white space only exists in mobile!
In addition to iScroll (which I have no idea how to fix that), Also I feel that this part of code may has direct effect on this issue, after recaptcha security image shows up:
I did check that code previously and it seemed ok. It was to stop the menu being hidden off to the right (IIRC) which would be a problem on mobile.
The issue seems to be related to the fact that on mobile iScroll does a custom scroll using transform whereas the desktop uses a different method to scroll. I believe the mobile version isn’t getting the correct page height when the images appear and scrolls too far.
I did see an old comment about iframes and gaps on iOS and using a fixed height iframe but using an overflow div in the iframe container. This would of course mean having access to the frame html and css.
Unfortunately I have limited testing while away which makes things very awkward (I’m typing this on a mobile at the moment so auto correct will probably mangle my comments :))
Hi Paul,
I think you are my only hope to solve this problem. I hope you will come back from your trip soon and have free time to investigate this problem in more detail.
Without advanced programming knowledge, solving this problem is too complicated for me. I really don’t want to remove recaptcha, but if it’s going to be like this, it will be a very bad experience for some viewers and it will have a negative impact.
Thank you again for all your help
But in this case, the second photo of the articles is not shown (seems it interferes with one of the plugins called lazyload, which has nothing to do with it at all !).
(example here: http://test5.harfrooz.com/)
I’ll try and have a look later today but it seems you have introduced a bigger problem on the main page.
You have a massive horizontal scroll bar on mobile (and I mean massive) that goes on forever. It’s almost impossible to scroll downwards as the whole page swipes to the side as you scroll down and you end up in the middle of a blank screen.
I believe I already mentioned this issue was likely to be that the hidden nav was placed far out to the right and I mentioned you shouldn’t remove the change to right :0 for mobile.
I’ll have a look later today when I can get to a desktop to inspect the code. I’ll have a look at your new issue also but as I said before I don’t have a mac that I can plug my iPhone into so I can’t use safari dev tools to test on an actual device.
That’s all you get. Nothing will scroll until you remove that webkit rule.
That lazyload plugin is a real pain fro me anyway because it stops me scrolling smoothly as I am on a slow computer and a slow connection. It makes navigating the site almost impossible. Can’t you ditch that plugin and just use the loading=“lazy” attribute in normal html? No script needed.
Why do you load your articles into an iframe inside a popup. If you could just insert normal html into the popup I think that some of the problems would disappear.
Hi Paul,
Thanks for reply. I was just trying to test different modes on another subdomain (test5) to maybe find a solution.
When I inject the “height: -webkit-fill-available;” through the Google Inspect page, everything works fine. But when I write it directly in template.css, the site has problems!
I actually didn’t remove right:0 ;
You’re right. Anyway, I remove that webkit rule. Probably a wrong way to solve the problem.
Do you face this problem always or only now that I added the webkit to website?
I know where to disable the lazyload plugin. But I don’t know where and in which file to put the code you mentioned.
Honestly I don’t know. This is not originally my design and my programming knowledge is zero.
To be honest, I was more hoping that you had returned from your trip, and since you told me that it is most likely a problem with iscroll, you could give me a solution in this regard.
I just want to remove the empty space below the articles which is too long.
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.
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.
Hello Paul
Thank you for pointing this out. I changed the code in http://test5.harfrooz.com and http://test6.harfrooz.com according to what you said. But I don’t have an iPhone to see if it’s fixed now or not?
Bad news for me, but I hope you have a great time wherever you are, and have a wonderful trip.
For testing, I deleted the iScroll.js file at http://test5.harfrooz.com. You can see the result on the site that the popup is completely disabled. But I couldn’t figure out which part of the css files is related to iscroll so I can delete it.
I searched in different files and found 3 files that I think are related to iframe size. I am attaching the files, but due to the fact that they are in JavaScript and PHP, I did not understand them myself. Maybe you can figure it out if you take a look.
wall.js (line 259)
scrollevent.js (line 2)
component.php (line 71) component.php (3.7 KB) scrollevent.js (317 Bytes) wall.js (11.7 KB)
Hello Paul
how are you? I hope you had a good trip and you have probably returned home by now. I’m sorry to bother you again. If you have free time, please help me solve the scrolling problem you mentioned on the iPhone.
Regarding the massive sideways scrolling on the iphone it seems that the right:-999em is stretching the page to 999em wide.
Please try adding an overflow:hidden and position:relative to the wrapper and then I will check if that sorts the problem (I assume we are still looking at http://test6.harfrooz.com/).
#wrapper{
overflow:hidden;
position:relative;
}
This may have negative effects if there are areas of the page that need to overflow so you will need to test it out.
Regarding your old problem of the extra space under the captcha in the iframe popup then I can’t see a solution from this end. I believe the problem is the iscroll js combined with the iframe resizer js not working together properly. iscroll hasn’t been maintained for years and indeed it makes the desktop page stutter and jump when scrolling and really is a danger of causing epileptic fits.
Firefox warns against this in the console. I would consider that you try to remove and disable the iscroll routines but it is not something that I can help with as it is obviously deeply embedded into your system.
I did also note that on my iphone SE any ‘lazyload’ images are not showing at all in the iframe popup. The first image shows but nor any subsequent images that have the lazyload attribute added. I would consider removing that attribute from the popup code. It does seem to be a known bug if you search for it. Indeed this may also impact the extra space you see as I note that popups with no images show very little space underneath.
I think that’s about as much as I can do as my expertise is mainly css and html and there is so much going on in your page that it’s almost impossible to test remotely and really needs a JS expert to have a look at it
Hi Paul,
You have helped me a lot so far and I cannot express fully in words how grateful I am.
I added the code at http://test6.harfrooz.com/ now. Please check if the “massive sideways scrolling” problem is fixed or not?
I don’t know why I can’t see this effect. It looks Fine in my laptop. I was hoping that at least everything would work well on the computer! Or I may can’t understand it correctly.
Can you please check if you see the same problem with lazyload on this version of site? http://harferooz.com/space/
Also do you see “massive sideways scrolling” in this version of site too?
I’m not sure how can I do that. If you have an opinion on this, please guide me.
But I think the problem related to the empty space is not related to this issue, because when I completely disable the lazyload plugin, there was still the same empty space under the article.
I had placed the code at the end of the theme.css file. (in http://test6.harfrooz.com)
I changed it to the end of template.css file now. Is that right place? Maybe something overwrites it?
Thanks for screenshots.
Seems like there is a section in Lazyload to exclude the plugin in desired sections. I add “class=iframe” there. Can you please check if the images inside the iframe are working now or not?
quote=“sashaiel, post:34, topic:409002”]
