Iframe opens but page is scrolled to bottom

Page: 1

Author Post
Member
Registered: Nov 2014
Posts: 10
Testing before purchase, I am opening an iframed page with a lot of content on it. It seems to open up just fine but the page is scrolled to the very bottom. Is there any way around this other than putting a scroll up event on the page?
Administrator
Registered: Aug 2008
Posts: 3382
The only way I know of that an iframe content page could scroll to the bottom is if the URL used to open it contains a #hash reference to an element near the bottom of the page, or if there is script on the iframe page itself that scrolls down on load.

If you want to show me the scrolling page online, I'll take a look and tell you exactly why it's happening and how to avoid it.
Member
Registered: Nov 2014
Posts: 10
Sure, also the background scrolls as well, how can I lock that so it doesn't scroll?

Check:

https://www.drlistings.com/

Click on any of the View Details buttons to view the listing.

I put scroll up javascript in it so its not doing it now.

Thank you.
Administrator
Registered: Aug 2008
Posts: 3382
There is much to cover here, and it took a lot of digging to sort it all out (hence the slow response). Almost all the problems seem to be WebKit (Chrome, Safari, iOS, Opera) specific.

The iframe content page is scrolling to near the bottom when it loads because there is an input field in the message form at the bottom that has autofocus on it. When an element receives focus, it is scrolled into view.

Firefox and IE are not scrolling that iframed page and seem to be ignoring the autofocus attribute when it is on an element in an iframe, leaving only WebKit to successfully focus the input field as requested.

The base page is scrolling at the same time as the iframe page because WebKit has an iframe scrolling bug. Often, but not always, WebKit browsers will scroll the base page in a seemingly random fashion when a scroll request is made in an attached iframe. This bug can be fixed only by the WebKit developers. If you stop your iframe from scrolling by removing the autofocus, the main page should no longer scroll along with it.

The more serious problem was not mentioned in your post. The presence of bxslider on the page is causing WebKit browsers to corrupt the rendering of the iframe. The corruption can be seen by scrolling the base page when the floatboxed iframe is open and noticing that the iframe does not scroll with the page, and that it blanks out completely, including its scrollbar components, as the base page is scrolled up and down.

This is occurring because bxslider is assigning a translate3d value to the -webkit-transform css property in order to slide its images to the left. This css property is classified as 'experimental', is non-standard, and has been known to be buggy in webkit for a long time. It is a poor reflection on the bxslider's quality that this property is used in preference to animating the standard and obvious 'left' property, and the correct solution would be for the bxslider author(s) to correct their script.

However, my new friend at http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/ provides a work-around that seems to do the trick. He reports that putting another translate3d transform on the body element solves the problem. The transform doesn't actually transform anything because it uses all zero values as parameters, but just being present seems to be enough to make the pages behave.

<body style="-webkit-transform:translate3d(0,0,0);"> solved the blanking iframe and other weirdness, such as the translucent page overlay breaking up, in my tests.

Of course there is no free lunch and there are rumours of "weird behaviour" if the transform is left in place. One example: Mozilla Developer Network reports that "Android 2.3 has a bug where input forms will "jump" when typing, if any container div has a -webkit-transform". This is of interest in your case because you've got a form on your iframe content pages.


Summary

-- The iframe content scrolls:
Remove autofocus from the input in the contact form.

-- The main page scrolls when the iframe loads:
This will stop when the spurious iframe scrolls are stopped.

-- Iframe blanks out as the main page is scrolled:
Temporary workaround is to put a style of "-webkit-transform:translate3d(0,0,0);" on the main page body element and test for negative fallout.
Permanent solution is to ask the bxslider folks to release an update that uses standard css properties such as 'left' instead of known buggy non-standard transforms, or find a different slider to use.

OOPS:oops::
The original of this post had a typo calling the transform property 'translated3d', instead of the correct 'translate3d' without the extra 'd' in it. I've corrected this post, but the typo may have caused trouble for your testing of the workaround.
« Last edit by admin on Wed Dec 03, 2014 1:23 am. »
Member
Registered: Nov 2014
Posts: 10
Wow, I'm glad I purchased this from you! You are very knowledgeable! Actually I was playing around with the background frame scrolling and apparently if you set overflow:hidden to the body element when the lighbox becomes active it corrects it. I did some testing in Chrome using the object explorer and it seemed to work. Thank you very much for the insights. I wanted to get rid of the bxslider but I am using it on the main top "hero" graphic. I will implement the changes you suggest. Again, thank you, that is amazing support. You went above and beyond.
Member
Registered: Nov 2014
Posts: 10
Thank you the autofocus removal worked.

The other fix you mentioned did also help but the background continued to scroll. I removed bxslider as a test and this continued to occur. I solved this by putting a jquery to set overflow:hidden to the parent window body. This solved the problem

window.parent.$('#thebody').css('display','block'); in chrome, however in IE and FF when the iframe lightbox is closed the parent page no longer scroll. I can do a work around by only displaying that piece of jquery code on webkit.

How difficult would it be for you to add overflow:hidden to the body element when the lighbox is active? I was researching and many on stackoverflow say that this is best practise for lightbox to prevent background scrolling. Like I said, even with bxscroller disabled the background continued to scroll when I scrolled to the bottom of the iframe. The removal of the autofocus did not correct this.
Member
Registered: Nov 2014
Posts: 10
Upon further review that doesn't work either. If the page is scrolled at all when the lightbox is activated, the iframed content loads up but the content is appearing at the top. So if just displays a blank area. This happens with or without bxslider. I can see this happening as if the page is scrolled only a small amount the iframe loads and I can see the problem with the content being located higher on the page. Now i'm starting to get frustrated :(
Member
Registered: Nov 2014
Posts: 10
Upon further review and consideration I have to remove the lightbox, nothing is working! I'm not sure why but no matter what I have tried there are problems. I was using fancybox before and it worked fine, the only issue was that it was slow to load and render. I'm going to try just displaying the page without any lightbox effect and see how users like it. Thank you for your help.
Administrator
Registered: Aug 2008
Posts: 3382
Sorry I couldn't come to your rescue earlier. We are in different time zones.

I'm a little confused by your description of the latest problem. It sounds like it might be a description of the webkit transform rendering bug that we already sorted out and that originates from the bxslider component.

I replicated your pages on my test server and they behaved just fine as soon as I put the transform workaround in place and removed the autofocus request. Your report that the rendering issue still occurs after removing bxslider from the page can only hold if you were testing the wrong page or not clearing your browser cache and pulling the unmodified original from that cache.

<UPDATE>
Please see my addendum to my first response where I correct a typo of 'translated3d' to 'translate3d'. Using the typo version of the CSS property could account for the rendering problem not going away.
</UPDATE>

As always, you're welcome to link me in to an example of the current problem, give a clear description of what the trouble is in the context of that page, and I'll help sort out how to solve it.
« Last edit by admin on Wed Dec 03, 2014 1:30 am. »

Page: 1