Chrome bug: rendering scrollable iframe (seems fixed for desktop, still buggy for Android)

iframe

(Alexandre Yamamoto) #1

So, there is a major issue with Chrome that seems to be for a long time and I don’t have a clue on how to solve this. I do need to use an iframe into my project and it has considerable amount of content, so you have to scroll at some point. The problem is that Chrome locks the scrollbar on iframes. It is still there, but it stays fixed. You can actually scroll down and up but that’s it. I wouldn’t mind at all but opening the same project on Chrome at my Android phone, it doesn’t scroll the iframe at all.

How to reproduce the bug:

1 - Create a rectangle or a HTML widget and put an iframe in there that you can scroll the content (I’ve done all of it with 100% width and 100% height both the Hype document and the iframe);
2 - Preview on Chrome / Save and open the HTML file on Chrome;
3- The scrollbar is fixed to the top.

I know this bug isn’t Hype related itself, but does anyone know how to solve this, please?

Thanks a lot in advance.


#2

Can you clarify what you mean by this? A screenshot and Demo document would be great.

It would also be helpful to know whether this happens in Chrome Canary and what your OS version is.

Thanks for reporting!


innerHTML with scripts keeps on top of everything
(Alexandre Yamamoto) #3

The scroll bar doesn’t move from top to the bottom (see the screenshot attached).

I’m using Chrome v42.0.2311 (64-bit) on Mac OS X 10.10.3.
I am downloading Chrome Canary to test it out right now.

I want to say again that this error it’s not from Hype only. If I write a conventional HTML file and try to embed an iframe it still reproduces the same error. I just want to know if you guys know a workaround for this.

Also, I’ve tried the object and embed tags instead of the iframe, but it behaves the same way on Chrome. And it’s Chrome only. Firefox, Safari and even IE it’s ok.

Thanks in advance!


(Alexandre Yamamoto) #4

Hey Daniel, I’ve just tested it on Google Canary and works just fine. I know it’s a bug and they might just fix it, but the desktop viewport isn’t even the main problem for me. The main problem is the mobile viewport. Opening my project on Chrome for Android, it doesn’t scroll at all. I still can interact (touch buttons and swipe) with the internal elements of the iframe, but it ins’t scrollable. That my main issue. So if you guys would know a workaround for this issue I would be grateful.

Thank you.


(Thomas Lundin) #5

I have had similar challenges. It works in Safari and Firefox on Mac. Not as expected in Chrome.

In Chrome, it is not possible to scroll the iFrame, unless quickly taking the scrollbar while it is visible during the page load.

My setting on the Mac is to only show scrollbars when scrolling. If OS X is set to always show scrollbars, I get two scrollbars in Chrome. There shouldn’t be any for the main document, but there is one. Chrome seems to always shows a scrollbar for every page, even if not needed. So a bit different in this case, compared to Safari. Firefox is somewhere in between.

Maybe Chrome has dropped some support here, during an update recently?

It is like 1997 again. I just love web technology…

With may tests on iOS; iPhone 6, iPad 2, latest iOS, the iFrame scrolling works. (But I get other problems on iOS with my iFrame-solution, waypoints are not triggered.)


(Alexandre Yamamoto) #6

Hey thomas_lundin, thanks for supporting this thread with some insight.

Yeah, Chrome lately is being a pain in the nuts since it abandoned webkit engine. I notice they might have fixed this scrolling problem in Chrome for Mac because I’m able to scroll the iframes again. BUT, Chrome for Android still can’t scroll al all.

I was having problem in Chrome for Mac at this version: v42.0.2311 (64-bit)
My version now is: 43.0.2357.65 (64-bit)

So they did apply some bug fixes, including this retarded bug that didn’t allow the scrollbar to move at all.


(Thomas Lundin) #7

My Google Chrome just updated itself to 43.0.2357.65 (64-bit).

And it works. Again. It has worked in earlier versions, some time ago.

I still have a problem on the iOS devices, with waypoints.js for the document that is in the iFrame. The waypoints are not triggered.

What versions of Android do you test with?
What Android browsers do you use?